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igital art, as we know, is a 
field that's constantly 
growing in popularity. 

s However no area of 
computer creativity is mushrooming 
faster than Web design. With relentless 
technological change, a boom in the 
number of slick Websites appearing, 
and massive numbers of people 
joining the Web revolution, it's 
terrifically exciting for us to bring you 
our latest Web Design Special. 

Whether you're a seasoned 
Internet professional or someone 


looking for a route into Web design, 
we're sure you'll find plenty here to 
help improve your skills, and therefore 
your sites. We're particularly proud of 
our coverdisc, on which you'll find 
complete versions of Macromedia's 
Web graphics tool Fireworks 1, plus the 
complete site design program 
NetObjects Fusion 2.0. 

On top of walkthroughs 
introducing you to both of these apps, 
inside we also bring you great tips on 
advanced interactivity,a Web game 
tutorial and professional advice on 


Communication, interactivity, design... 


creating splash screens and Flash 
animations. In addition, we talk toa 
range of Britain's finest Web designers 
to see what they're up to. 

Even conservative estimates say at 
least 140 million people use the Web 
and through good design, and witha 
little help from us, you'll be well on 
your way to reaching them. If you'd like 
to comment on the magazine, or tell us 
about the sites you've created and 
things you'd like to read more about in 
Computer Arts, drop us a line at: 

e@ caspecials@futurenet.co.uk EES 
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Macromedia is the master 
when it comes to Web 
design software and we’re 
proud to bring you a full, 
unlimited version of the 
company’s Web graphics 
program Fireworks on our 
CD. Get up to speed with 


the software by following Tee! 
our walkthrough. 


As bandwidth improves the 
next revolution in Web 
graphics will be the move 
to 3D. Are you ready for the 
new technologies? This 
feature will bring you up to 
date with VRML, 
Superscape VR and 
MetaStream. We’ve even 
got a B3D Max tutorial... 


[J Splish Splash 
Discover what makes a 
splash screen work. 

12 Nykris Digital Design 
Showcase and site makeover 
with this top agency. 

18) Adobe Exclusive 


The first news of Adobe 
LiveMotion 1.0, plus other 
software previews. 
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Websites to life 
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Master the full Web graphics 
application on our CD. 


Ed NetObjects Fusion 2 


Build sites with the site 
design program on our CD. 
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Find out all about this 
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[F] Flash 4 tutorial 
Headstate show you how to 
get to grips with Flash. 

[5] 3D on the Web 
Stand by to enter the third 


dimension, as the World 
Wide Web gets real. 


52] Design a Web game 


Learn how to create a game 
for the Web in Director 7. 


and Signposter 3 
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Glaswegian Web company. 
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Comprehensive directory of 
Web software. 
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SPLASH SCREENS NOT ONLY GIVE YOU THE CHANCE TO ADD FLAIR AND 


CREATIVITY TO YOUR SITE, BUT CAN BE AN EXCITING AND EFFECTIVE 
WAY OF COMMUNICATING THE ETHOS OF A SITE TO ITS VISITORS... 


First impressions are ever so important on the World 
Wide Web. As competition for so-called eyeball time 
grows increasingly fierce, it's essential your site has 
an instant impact on its visitors. Never mind your 
client list or portfolio, by designing an effective splash 
screen you can take big steps towards keeping users 
at your site and gaining new clients. 

A splash screen is your facility for introducing 
yourself (or your client) to Web users. A good splash 
will entice visitors into the site, telling them a little bit 
about who you are and what you do through good 
design. They might take a little extra time to 
download, but splash screens give you the 


opportunity to embrace and entertain their audience 
before foisting an interface upon them. They offer you 
a way to reward your visitors for taking the trouble to 
type in your URL and download your site. 

In this multimedia age, colour, motion and sound 
are all key criteria when it comes to splash screens. 
Here's a collection of sites which are definitely worth 
visiting as you consider ways of conjuring up splash 
screens for your sites. Some are fancy, some are 
wacky, some are plain and some are downright weird, 
but they're all very effective at what they set out to 
do. We've included links to all of these sites on our 
CD for easy access... 


ee 
aims to be 


7 


the most respected 
developer in the world 


through producing the 
highest quality, most original 


e www.lionhead.co.uk 


buttons give the whole 
environment a lively 
and interactive feel to 


introduces this on-line 
record company was 
probably fairly simple 
to do, but proves 
immensely effective. It 
gives an instant feel 
for Pork Recordings’ 
brand identity, 
downloads quickly and 
is perfectly punctual. 
When the dance is over 
he exits the screen and 
you can get on with 
looking for the music 
you came for. 


< splash screens ee web special > 


i would like to speak to you 


e www.matinee.co.uk 


Matinee is a new 
media company, and as 
you'd expect it knows 
what it’s doing when it 
comes to on-line 


e www.echosystem.com 


The polygon people 
image is striking, and 
the message is odd, 
but that doesn't hold 
back this French outfit 
with their electronic 
outlook. Further into 
the site you'll discover 
samples of their music, 
MP3s to download and 
enough Web toys to 
suggest they've got 
loads and loads of 
ideas for their next 
splash screen. The 
tape machine is 
excellent... 
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> e www.hoover.co.uk > © www.psychocowboy.com 


Desigmuseum 


South Bank by Tower Bridge 
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e www.in-the-shed.com 


< splash screens 8 web special > 


Splash advice from Signal Digital A/S... 


Design tips from the team with a special focus on front end presentation 


oucan never change a first 

impression," explains Signal 
Digital's executive producer Ronnie 
Rocket, "and this is even more true 
when designing Websites. Not only 
is the first look and feel really 
important, the technical 
performance also matters. The 
opening page must be good looking 
and fast moving." Ronnie also 
revealed his five top tips for 
designing splash screens: 


> 1Get the big picture: use large, 
well-treated pictures, small icons 


and html text. Always limit 
the number of fonts and colours 
featured in your splash screen. 


» 2 The freshmaker: Program 
different opening pages with similar 
content and design, but change the 
main picture and/or headlines. 
You're not trying to fool anyone, but 
it does make a Website last longer. 
This is my favourite trick these days. 


» 3 Make a bad day better: Pre- 
program a set of common splash 
screens for the client, a nice looking 


e www.channels.co.uk 


Under Construction and Server 
Down can always come in handy. It 
will happen eventually. Some clients 
might want a version with snow on 
it for the Christmas season. 


Ganon 


» 4To Flash or not to Flash? Use only 
Flash technology where more than 
go per cent of your target audience 
are plugged in. 


» 5 An applet a day keeps the viewer 
away: No audio files, java applets 
or other annoying effects on page 
one, please. 


Based in Denmark, Signal Digital is one of Europe's top 
Web design agencies. Visit w www.tuborg.dk/gp2000. 
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> e Www.olympic.org > e www.lego.com 


j 
virgin atlantic Vey 


Join in 


their games, here it is. 
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> e Www. mcsaatchi.com 


Ah. Maurice and 
Charles Saatchi are 
back and they're on the 
Web. They've always 
known a thing or two 
about presentation and 
it shows through. With 
golden squares rolling 
about everywhere the 
interface is strikingly 
enticing, yet nowhere 
near as in-your-face as 
some of the ad 
campaigns for which 
the Saatchis are best 
known. 


e WWwW.eu.levi.com > 


Levi's marketing has 
been heavily geared 
towards shaking off 
the rough 'n' ready 
image the denim 
purveyors held in the 
70s and 80s. Sharp, 
fashionable and casual 
is the new Levi's look 
and that's what this 
‘hot and white' site 
oozes in abundance. 
Hence we even have a 
link to Jamiroquai's 
clothing offerings. 


What is my splash screen for? 


Undergroundfilm.com offers its philosophy on designing splash screens 


Trem whizzy with Flash is little use if you 

haven't got a clear idea of the message that 
you're trying to get across in your Website's 
splash screen. This is a sentiment strongly held by 
Adrien Glover, executive content editor at 
Undergroundfilm.com. She recommends: 
"Whether an animated GIF, or created in Director, 
DHTML or Flash, every commercial Website's 
splash screen should”: 


» 1Intrigue and invite 


» 2 Visually capture the essence of your brand 


» 3 Be lightweight 


» 4 Function (your technology should be 
bulletproof - if you use plug-ins, consider 
the lowest common denominator) 


> 5 Give viewers the opportunity to skip the 
intro altogether 


And it's absolutely essential you plan out your 
message before embracing the technology. "As 
the creative director, you want to ask yourself, 


‘What is the intended result of my splash screen?’ 


If you can’t describe your message or feeling you 
want to impart in five words, you haven't fully 
honed your directive. Think of your splash screen 
as design haiku," concludes Adrien Glover. 


< splash screens a web special > 


e www.whitedot.com 


e www.yenz.com 


The abstract and colourful splash screen which greets visitors to 
the Undergroundfilm.com Website. 
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< web special nykris showcase > 


EIEN CHOICE } ue 


(above) How the BBC Choice site 
evolved from the channel's ileve brands environment finance recruitment news 
distinctive onscreen branding 

(© BBC 2000). 


(right and below) Screens from 
the Unilever Website designed 
by Nykris Digital Design. 


Africa 


Unilever South Africa 

Eastern Europe 

Unilever Czech Republic 
ni rk i 


Unilever Slovakia 


a 


N41. Thanks to the surfeit of Web design firms springing 
up there, Shoreditch has become known as Silicon 
Ditch, but few of them can boast the plaudits enjoyed by Nykris 
Digital Design. 
Founders Nikki Barton and Chris Prior met ten years ago, 
when they were working on a BBC documentary about the future 


: ‘ of multimedia. Nikki studied graphic communication at Reading 
Inspiration knows no bounds for | University in the late 80s, looking at the birth of interactive 


this London design studio. multimedia, while Chris studied graphic design at the Central 
College of Art. After a decade spent working for assorted 


“We ‘ll look at 20s German multimedia companies, they founded Nykris in 1997. 
‘“ | "The premise was to make a company that wasn't going to 
design, perhaps, rather than | get pigeonholed, because we worked for companies who put all 
° ° ” r | their eggs in the basket of CD-ROM production and the bottom 
just 9os Web design, explains fell out of that," says Chris. "So we decided that we wouldn't fall 
; H : into that trap on the basis that the industry was a fluid one.” 
director Nikki Barton | Although the core of Nykris' business is the Internet, they 
| keep an eye on future trends. For instance, Nykris has done a lot 
| of work on interactive television, developing the British interface 
for Microsoft's WebTV service, and the on-screen guide for 
OnDigital. 

"We are information designers at heart," says Nikki. "We 
don't have a house style, we change style as is appropriate for 
the job." They both agree that their background in traditional 
design has contributed to their success. 

"We'll look at 20s German design, perhaps, rather than just 
90s Web design," explains Nikki. "A lot of the Website books are 


| t's been a well-kept secret until now, but there's an 
information revolution going on in an unlikely corner of 
f 
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just absolutely appalling and scary when you look at them, in 
terms of information design." 

One of Nykris' most recent projects was the site for the 
digital channel BBC Choice. How much scope for creative 
freedom is there on a project like that? 

"The BBC sites all have a strong identity," says Nikki, "they 
have rules about the left-hand column, so that can be limiting." 
The site was inspired by the channel's 'mouse' branding. Nykris' 
brief was to make the site fun and enticing, and not like a BBC 
site. So the mice idea has been developed, with a menu carved 
from a lump of cheese, plus lots of Shockwave Flash games. 

Another mammoth project was building the global site for 
Unilever, which boasts a menu where you're never more than 
two clicks away from any piece of information. 

"It's a global operation, with extremely strong branding," 
explains Nikki. "We had to spend a lot of time consulting about 
branding issues, the colours that are used — and they've got an 
enormous amount of data. We set up a server that allows it to 
grow and evolve." 

How do Nykris find their clients, and how involved are they in 
the design process? "They find us, actually," says Nikki. "What 
we normally do is sketch out rough ideas, that doesn't mean 
anything worked out onscreen sometimes, we talk to them, get 
some feedback and go on to develop the first stage." 

Nykris often produces a written document focusing on the 
site's structure, says Chris. "What we mean by design is not 
only what you see on the screen but behind it — the code work 
underneath it which is equally important." 

So with 10 full-time members of staff, already, and 
expanding all the time, what kind of people does Nykris look for? 
"Basic design is important," says Nikki. "There's a lot of 
discussions going on at the moment, saying good design is 
better than being able to use the software. | don't think that's 
applicable any more, the pace is so fast." 

Chris adds: "One of the things the Internet has done, which 
is quite a bad thing, is make it possible for people to set up 
companies claiming to do all this stuff and in fact very few of 
them do it really well." 

But it seems Nykris is ready for whatever the future throws 
up, says Chris. "The Web is the flavour of the month now, but in 
five years time the way it’s presented and the way it works may 
be different, so we have to keep ahead." 


TEU U UE EEEEEEEEEEEE EEE 


Contact Nykris Digital Design on t 020 7250 1650, @ info@nykris.co.uk, 
wwww.nykris.co.uk. Featured sites can be seen at W www.bbc.co.uk/choice 
and W www.unilever.com 


< nykris showcase a web special > 


Nykris Digital Design’s own Website 
makes great use of Shockwave Flash 
animation, as well as an imaginative 
line in graphic design. Note the heads 
on the man and woman. 


Turn over to discover how Nykris Digital Design gave 
architect Richard Rogers an on-line makeover > 
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Building sites 


DISCOVER HOW NYKRIS GAVE BRITAIN'S LEADING ARCHITECT AN 
ON-LINE MAKEOVER. "THE BRIEF WAS QUITE SPECIFIC, BUT WE TOOKA 
COMPLETELY DIFFERENT APPROACH. IT WAS A BIT RISKY..." 


n the three years since it was set up, Nykris 

has undertaken some impressive projects, 

but the team's latest challenge is probably its 

most prestigious to date — giving architect 
Richard Rogers an on-line makeover. 

Some of the planet's most distinctive buildings 
were designed by the Richard Rogers Partnership, 
from the Millennium Dome and the Lloyd's of London 
building, to Paris' Pompidou Centre and the 
forthcoming National Assembly in Cardiff. However, 
the company's old Website failed to reflect the 
partnership's reputation for creativity and innovation, 
or its stature within the design community. 

Surprisingly, it seems that architectural practices 
are only just waking up to the possibilities presented 
by the Web. "Whenever we look at architectural sites, 
they are appalling," says Nykris co-founder Nikki 
Barton. "We're stunned at the fact they can present 
themselves in that way when their standard of 
building and graphic design is so high." 

Richard Rogers Partnership set about finding 
someone to redesign their Website through a 
competition advertised in Architects Journal and 
Computer Arts magazines, which attracted 70 entries. 
This method was something of a departure for Nykris, 
but it's a common approach in the world of 


Nykris beat off competition from 70 other entrants to 
win the right to redesign the Richard Rogers Website. 


“When we look at architects’ 
sites, they are appalling, 
we’re stunned that they can 
present themselves that way” 


Th original Richard Rogers Website was extremely 
text heavy, with a flat, uninspiring design which 
didn’t do justice to the partnership’s global reputation 
for flair and imagination, with no animation, sound or 
Shockwave Flash whizzery. 

Nikki Barton, who is actually married to an 
architect, says the profession is still getting to grips with 
the opportunities offered by the Web. “I think what's 
happened is that the technical side of the company has 
tealised they needed a Website without other people 
realising, or it hasn't been seen as important,” she says. 

“Obviously for architects it's going to be the most 
important way of distributing information about 
themselves, especially with larger ones around the 
world, people aren't going to wait for the brochure to 
come over, they're going to go to the Website.” 


The original site was dominated by text on bold colours, 
which didn’t really reflect the firm’s sophistication. 
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Richard Rogers before... How Nykris developed their blueprint for change 


There were graphics to illustrate architectural case 
studies, but the design still failed the catch the eye. 


architecture. Unfortunately, Nykris found out about 
the competition just four days before the closing date, 
but that didn't stop the company getting on the 
shortlist of eight, and ultimately winning the contract. 

The old Website wasn't particularly impressive, 
as Nykris producer Shashi Desai explains. "It was 
very text heavy, with very bright colours, glowing 
buttons, it doesn't really reflect the sophistication the 
company has. It was very flat." 


Different class 


Initially Richard Rogers were unequivocal about what 
they wanted from the new Website, laying down a 
thorough specification detailing what they wanted 
each page of the site to do. But Nykris decided to go 
for broke and formulate their own approach instead. 
"The brief we had was quite specific — white on black 
text, very bold colours — and we took a completely 
different approach to it," says Nikki Barton. "It was a 
bit risky." 

However, the Richard Rogers spirit of innovation, 
and their awareness of Nykris' flexible approach, 
meant they were open to new ideas. Nykris were so 
excited to get the site because of the partnership's 
appreciation of good design and their experimental 
approach to architecture, believing they could 
complement that in their approach to the site. 

So Nykris were keen to make the site reflect the 
architects’ character and maximise the potential of 
the Web, making the site more than just 
‘brochureware’. "We talked a lot about how you could 
make it work, so it's not just a Website, it's Intranet 


Flash point 


Arron Bleasdale and Adam Robertson of Nykris reveal how they developed this simple but effective ‘tuning television’ 
transition in Flash to create an interesting method of cycling through the news stories on the Richard Rogers Website 


So. In frame 10, chop out horizontal sections of the 
Draw a square on to the stage of your Flash So. Insert a Keyframe into frame 10 using the F6 square using the selection tool. You should leave 
movie, and fill with any colour. key. This will duplicate frame 1 into frame 10. yourself with an image resembling a bar code. => 


sites, and we talked a lot about the exchange of 
architectural drawings," says Nikki. 

For the site's opening screen, Nykris used the 
idea of a horizon line ‘morphing’ into profiles of 
Richard Rogers' most famous buildings in Shockwave 
Flash, while more complex animations load in the 
background. Much more appealing than the old text- 
dominated splash screen. 

"You get 3D imagery upfront, all sorts of things 
moving subtly, it keeps your interest but doesn't 
dominate the information too much," explains Nikki. 

Nyrkis also strove to make the navigation as 
attractive and intuitive as possible, rather than the 
rather drab text-based links used previously. "As you 
move around, the skyline hints at the layers of 
information hidden underneath without having to go to 
it, you just roll over it," says Nikki. "We wanted to 
keep the navigation so you can quickly get from one 
area of the site to the other." 

Nyrkis didn't throw out everything from the 
previous site, however. One aspect that came through 
strongly was the use of colour coding, which is used a 
great deal in Richard Rogers buildings, a fact Nykris 


The site Nykris created for Richard 
Rogers Partnership features plenty 
of information about the practice’s 
most infamous recent project, the 
Millennium Dome at Greenwich. 


Millennium Ex 


and after the finished article revealed 


T fact that Nykris won the contract is all the more 
impressive when you consider they devised their 
initial entry in just four days, with Nikki Barton and 
Arron Bleasdale working flat out to put it together. 

“What we actually came up with is quite different 
to what we've got now, it showed quite innovative ideas. 
They wanted ideas for a home page and how you'd 
navigate round the site,” explains Nikki. 

Once Nykris had won the contract, more discussions 
ensued, says Shashi Desai. "We had to go over there and 
thrash out the next stage. They've got 11 directors, it's a 
very fluid organisation, but they're all design-led people.” 

The finished site now features lots of case studies of 
Richard Rogers Partnership buildings, in the form of a 
narrative, including the site, the design of the building The new site sees a much more subtle approach, with The colour-coded navigation borrows from Richard 
and the materials used and so on. animations featuring Richard Rogers buildings in profile. Rogers buildings, with a more pleasing backdrop. 
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Shape from the pull-down menu. 
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Double click frame 1 to access the Frame 
Properties window. Select Tweening and then 


Create another Keyframe in frame 20. Delete 
all of the lines on the stage bar one in the centre. 


CC With graphics, text and links added, your end result could look like this. 


Double click frame 10 and again choose 
Tweening and Shape. Insert one last Keyframe 
into frame 21 and delete the last remaining line. 


Richard Rogers Partnership 


“They all really liked it, they were very pleased with it, 
because they're extremely design literate people and they 
were happy with the approach we showed” 


also gleaned from their research, a process which 
involved an awful lot of weighty architectural tomes 
and a lot of Post-It notes. A coloured strip at the top of 
each page defines each section, such as news, 
profiles, and case studies, making it easy to navigate, 
while the strong blue background works well and is in 
keeping with RRP’s identity. 

However, Richard Rogers Partnership were 
concerned that the early versions of the Nykris site 
made their buildings flat and 2D, and didn't really 
reflect their trademark 'layering' approach. QuickTime 
Panoramas of existing buildings and live Webcams of 
new projects were added to give the complete picture, 
while a ‘scan line’ which reveals urban plans and 
building details was introduced to reflect RRP's whole 
approach to architcture, along with lots of photos of 
‘work in progress' on projects such as the Dome. 

"They expressed a wish to show the process," 
says Shashi Desai, "because they take in the whole 


environment, how the building will impact on the 
locality, they're very up on green issues, so they 
wanted to get across their process, the idea of the 
layering of their buildings, the process of creating a 
building, so there was a lot of discussion." 

Other considerations included making sure the 
animations were small and quick to load — 300k 
pages which take ages to appear were out — and easy 
to alter without having to change the entire site, as 
Nykris intends to constantly update the site, 

So with the site about to go live, Richard Rogers 
Partnership are delighted with the Web blueprint 
Nykris has devised. "They all really liked it," says 
Nikki Barton, "they were very pleased because 
they're extremely design literate people and they were 
happy with the approach we showed." GEES 


rer — 


The Richard Rogers Partnership site can be seen at 
W www.richardrogers.co.uk 
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The definitive guide to Web ate * Mac & PC 


Discover the latest and best in Web design packages 


Adobe LiveMotion 1.0 «- 


A new Web animation option has appeared on the horizon in the form of Adobe 
LiveMotion 1.0. We bring you an exclusive first snapshot of the program... 


( preview 

( £TBC ) 
( Adobe Systems ) 
( 020 8606 4000 J 
( www.adobe.com ) 


+ Vector tools 

yr Creative effects 

yx Shape morphing 

yx Definable motion paths 
xx Combine elements 


yx Sound panning and fades 


yx HTML replacement and insertion 


x Colour scheme generator 


¥ Edit Photoshop or 
Illustrator original files 


¥ Photoshop filters 
¥ Live previews 


yx Adobe interface 


LiveMotion will fit into 
Adobe's range of creative 
products right next to 
GoLive, the company's 
professional Web desley 


ven Adobe's 
executives are 
bound to admit that 
competitor 
Macromedia has done 
fantastically well over the past 
four or five years, particularly in 
the field of Web design. 
Dreamweaver and Fireworks 
have become the software 
packages of choice for site 
creators in most quarters. 
Meanwhile, Shockwave Flash, 
which facilitates lively 
animations on the Web, has 
become a widely accepted 


Adobe 


@ 


MACINTOSH 
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GoLive4o 


The premiere tool for creating cutting-edge Web sites 


standard for Web designers 
and Internet users alike. 

However, with programs 
like Photoshop, ImageReady, 
Illustrator and GoLive in its 
portfolio, Adobe still has plenty 
of cards in its hands, and as we 
go to press the company has 
announced a brand new 
application for designing Web 
animation and interactive 
content. It's called LiveMotion 
1.0, and with it Adobe is 
claiming to raise the bar in 
terms of what's possible with 
Web animation. The new 


program is set to be launched 
this summer. 

A massive selling point for 
LiveMotion will be the fact that 
its interface makes it consistent 
in look and feel with Adobe's 
other popular graphics and 
design tools. Photoshop is one 
of the most popular and best 
respected creativity packages 
of all time, and a good chunk of 
its three million registered 
users will undoubtedly relish 
the opportunity to try out their 
talents creating moving images 
for the Net. 


It supports Flash! 


Naturally, Adobe is highlighting 
LiveMotion's many links with 
established packages in the 
company's range. You'll be able 
to import Photoshop (PSD) and 
Illustrator (Al) documents and 
work on them in LiveMotion. 
The program supports layers, 
and layered documents can be 
incorporated as keyframe 
sequences, composite objects 
or independent objects. 
Whereas other packages 
producing animations for the 
Web might require designers to 
flatten their layered files before 
working on them, LiveMotion 
exploits layers within the 
process. 

One of the most 
interesting features of 


LiveMotion is its support for 
the Flash (SWF) format. As 
painful as it must have been, it 
seems Adobe has accepted the 
strength of Macromedia's Web 
animation file format and just 
decided to get on with the show 
—a smart move. Considering 
that the Shockwave Flash 
browser plug-in has been 
downloaded 200 million times 
by Web users around the world, 
it would be an uphill struggle 
for Adobe to establish a 
competing technology. 

When exporting as a SWF 
file, LiveMotion enables the 
user to control the quality of 
any bitmaps used in the 
composition, as individual 
objects, so you don't have to 
put up with sharp animations 
with blurry components. 
Alternatively, the program can 
export works as animated GIFs. 
When it comes to still images 
GIF, JPEG, PNG and SVG are 
supported. You can also divide 
your creations into an HTML 
table with animated and still 
images, complete with 
JavaScript interactivity. 


Sound and vision 


The actual creative work is 
done through the program's 
Animation Timeline. Here you 
can work with imported 
images, or ones created using 
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Computer Arts Live 2000 the ultimate show for digital creatives 


Yes! It's another piece of late breaking news. Following 
the success of the first Computer Arts Live show last 
September, we've decided to make it an annual event. 
Hence the announcement of Computer Arts Live 2000, 
which will take place at London's Business Design 


Centre in Islington on 12, 13 and 14 September. 

At the show you'll see live, on stage presentations 
by some of the world's leading Web designers, graphic 
designers, 3D and video art studios. You'll be able to find 
out just how some of the finest computer artworks in 
2000 were generated, with the opportunity to ask 
questions and meet the designers after each 


“LiveMotion’s interface makes it consistent with 


Adobe’s other tools. Photoshop’s three million users 
will be itching to try out their talents for the Net” 


LiveMotion's own graphics 
tools. Not surprisingly, these 
tools are pretty much the same 
as the vector-based drawing 
tools found in Photoshop and 
Illustrator -— ellipse, rectangle, 


rounded rectangle, polygon 
| and so on. The position, 
opacity, shape rotation, colour 
| and special effect attributes of 
each object can be controlled 
directly through the timeline 


arts 


special 


Web graphics 


Design 


Interactivity 


Animation 


Compression 
Auto HTML 


With Photoshop and ImageReady combined in Photoshop 5.5, an 
animation tool for the Web is the logical next step for Adobe. 


Adobe will help you Smash the Status Quo... 


rather than through a series of 
menus or dialog boxes. 

Effects are important in 
any animation package, and 
LiveMotion aims to impress on 
this front too. Basic operations 
like uniting, intersecting and | 
excluding objects are bolstered 
by the ability to add 3D effects 
like bevelling, embossing and 
shadows. Photoshop filters can 
be brought in, as well as image 
adjustments and distortions 
such as spherizing, 
displacement and twirls. 

Animated effects can be 
kicked off automatically 
through a single keyframe. | 
Instead of placing start and 
finish frames, the animator can 
set a keyframe and simply 
define how long it will take for 
an effect to manifest itself. The 
program will automatically 
apply and tween the effect 


presentation. The sponsors we're lining up- which 
again include global leaders — will also be on hand 
demonstrating their latest products and giving tips and 
inside advice on how to make the most of your 
hardware and software. 

Last year's show was a resounding success, and 
2000's will be even bigger. Advance tickets are already 
available. You can order a single day entry ticket for the 
show for £12. Subscribers to Computer Arts and 
Computer Arts Specials can order early for £8 for a single 
day ticket. Early bookings for tickets covering all three 
days of the show cost £18. Call 01458 271148. 


design community. 


according to the timescale 
specified. 

Audio too is essential in 
any form of entertainment and 
LiveMotion will support the key 
formats. WAV, SND, AIFF, AU 
and the popular MP3 standards 
can be incorporated into your 
moving creations either as ‘ 
soundtracks or linked to 
interaction used on the Web. 
Multiple audio tracks can be 
employed, and effects such as 
panning, fade-in and fade-out 
may be applied. 


The logical thing to do 


There are many, many other 
features in LiveMotion which 
we haven't even begun to 
touch on here —some big, some 
small. In the scheme of things, 
the launch of LiveMotion is 
clearly a logical next step for 
Adobe. Adding a Web 
animation tool to the 
company's range enables it to 
compete more evenly with 
Macromedia for the hearts and 


é 
Bene SS 
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..and Defy the Rules while you’re about it. 


Don't miss this year's Computer Arts Live show — 
your chance to catch up with the entire digital 


minds of Web designers. A 
healthy bit of extra competition 
on the market, it means more 
choice for the ever growing 
number of Web designers out 
there. Watch for plenty more 
coverage of LiveMotion, anda 
full review of the program, 

in upcoming issues of 
Computer Arts. GE 


The price is right 


Adobe estimates that the US 
introductory price for 
LiveMotion will be $299, so 
going on past experience we 
can realistically expect a UK 
price between £200 and £300. 
The LiveMotion Beta is being 
released for testing as we go 
to print, with the final release 
planned for this summer. The 
program's likely to require a 
PowerPC with Mac OS version 
8.5 or higher and 64MB RAM; 
or a Pentium! with Windows 
98, 2000 or NT4 and 

64MB RAM. 


l \ dobe's current 
advertising and Web 

campaign stresses the 

company's all-round 


approach to digital creativity. 
Recently, Adobe has been 


plugging two image-based 
Websites at 
wwww.defytherules.com and 
wwww.smashstatusquo.com. 
Each introduces Web users to 
Web design the Adobe way. 
Have a look... 
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< web special = software news > 


Dreamweaver 3 & 


The professionals' favourite Web authoring tool is new and improved, with 
enhancements to help you get the job done faster than ever before 


ust as we go to 
press, the latest 
versions of 


( preview 
rab y Dreamweaver and 
ae ee, Fireworks have been released 
by Macromedia. Without time 
full product £269.08 to review them fully we decided 
to give you a first peek here, 
. and this will be followed by 
Macromedia computers unlimited 
02083585857 
( Wwww.macromedia.com ——/ 


comprehensive reviews in issue 
42 of Computer Arts, which is 
on sale from 23 February. 
Macromedia still hails 
Dreamweaver as the only 
authoring tool capable of 
Roundtrip HTML and XML, 
which automatically updates 
4 QuickTag Editor for changing the the visual view of the page 
when changes are made to the 
underlying code. 

Having reinforced 
Dreamweaver with site 
management tools and support 
for XMLin version two, 
Macromedia was always going 
to find it difficult to persuade 
professionals that any further 
upgrades would be worth the 
money. 

With Dreamweaver 3, it 
seems likely to succeed. Many 
of the new features are 


HTML of specific objects 

yx HTMLstyles applies text 
formatting without CSS 

vx Clean Up Word HTML optimises 
Microsoft code 

yy Save actions as macros with the 
History palette 

¥ Check files in and out during 
collaborative work 


vy HTML Inspector has line numbers 


in margin 


Perecaph Atria 


The HTML styles palette enables you to apply text formatting 
to characters and paragraphs without recourse to cascading 
style sheets. 
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productivity enhancements, 
making it quicker and easier for 
individuals and now teams to 
design Websites. Indeed, the 
new Studio bundle of 
Dreamweaver and Fireworks 
recognises this by tightly 
knitting the two together. The 
tools will likely be even more 
tightly knit in future, and it will 
be interesting to see if they're 
still being sold as separate 
applications in a year's time. 

One way Dreamweaver 
speeds up site design is with 
the History palette, because 
you can now undo any previous 
changes, even those you saved 
afterwards. A sequence of 
actions as a macro may 
additionally be saved as a 
macro in its own right. Since 
these macros are saved as 
JavaScript commands, they can 
be modified later by editing. 

Another undoubted time- 
saver is the new QuickTag 
Editor, which enables you to 
view HTML source code for 
objects you select in the 
WYSIWYG view. Hitting a 
keyboard shortcut opens a 
window displaying the code for 
the selected element alone, 
which you can change without 
switching to the full-blown 
HTML editing mode. 

Dreamweaver 3 also 
addresses the problem posed 
by cascading style sheets 
(CSS). Older Web browsers do 
not support CSS, and up until 
now there has been no other 
way to format text speedily. 
Dreamweaver 3 nimbly side- 
steps this problem with an 
HTMLstyle palette, from which 
you can drag and drop 
character and paragraph 
formats to selected areas of 
text. You can also save 


Many of Dreamweaver's menus have expanded since the previous 
version. You can even set HTML format preferences for common 
tags. Turn to page 74 for our Dreamweaver 3 tutorial. 


and optimises the codeto _ 


make it as efficient as possible. 


favoured styles in the palette 
and share them with colleagues 
as cascading style sheets. 

One of Dreamweaver's 
undeniable advantages has 
always been its support for 
Macromedia’s latest Web 
technologies, and the new 
edition is no exception. The 
Objects palette now allows you 
to insert Generator, Flash 4 and 
Shockwave 7 content, along 
with a special set of characters 


“One of Dreamweaver’s advantages 
has always been its support for 
Macromedia’s latest technologies” 


such as the symbols for 
trademark and copyright. 

With Web design moving 
rapidly away from lone coders 
to large companies, it's no 
surprise that Macromedia has 
beefed up the collaborative 
features in Dreamweaver 3. For 
example, files can be checked 
in and checked out so that only 
one designer works on them at 
once. It also facilitates greater 
communication because 
comments can be attached to 
pages in an XMLfile. 

For professionals for whom 
time is money, Dreamweaver 3 
is definitely worthwhile. FEES 


Fireworks 3 


Fireworks burns brighter than ever with more support for 
your other Web tools and a host of time-saving features 


( preview 

( upgrade £116.33 ) 
( full product £163.33 ) 
( Macromedia computers untimited/ 
( 0208358 5857 ) 
( www.macromedia.com _/ 


¥ File export to /llustrator 
and FreeHand 


x Symbols library for 
storing buttons 

x Step-by-step button creator tool 

¥ Preview panels show four o 
ptimised images 

¥ Colour, brightness and contrast 
controls built in 

yx History palette enables 


multiple undos 


ith such intense 

competition in 

the software 
Ww market, 
developers seem compelled to 
come up with unique selling 
points (USP) for their products. 
Fireworks was different in that 
it had a genuine USP, one that 
wasn't dreamed up by over- 
imaginative marketing men. 

Fireworks recognised the 
way designers worked on 
graphics for Websites by 
allowing them to edit images 
and HTML code in the same 
application. Since Fireworks 
may be used to edit vector 
images and optimise bitmap 
graphics, it truly represented a 
self-contained Web tool for 
graphic designers. The trouble 
was that it was a little too self- 
contained, a fault that's now 
been rectified in version 3. 

The upgrade is simply 
more sophisticated in its 
support of other types of 
graphics files. When you import 
a Photoshop image, for 
example, editable text layers 
and layer effects are preserved. 
You can import and export 
vector graphics from /llustrator 
and FreeHand, and it almost 
goes without saying that 
vectors and images can also be 
saved in Macromedia's own 
Flash (SWF) format. 

Other changes mirror the 
new features in Dreamweaver 
that make it quicker and easier 


to finish your designs. One 
such feature is the History 
panel, which enables you to 
undo an unlimited number of 
editing steps. Asin 
Dreamweaver, a group of steps 
may be saved as a JavaScript 
macro to simplify future 
editing. 

Similar work has gone into 
making Fireworks' optimisation 
tools quicker to use. 
Optimisation enables you to 
pare down a picture's file size 
by compressing it, and in 
Fireworks 3 you can see the 
results of the changes without 
having to save the file. Tabbed 
preview panels enable you to 
switch between four variants of 
the same image. Even clickable 
buttons and buttons with 
JavaScript rollover effects 
function correctly in these 
panels, which are immediately 
updated when you modify the 
original image. 

Buttons can quickly be 
created using the new step-by- 
step button maker, and 
afterwards stored in Fireworks’ 
new Symbols Library. 
Impressively the Library palette 
treats a button as adocument 
in its own right by storing all 
the slices and links associated 
with it. The Library also has a 
play function so that you can 
view a button's interactive 
properties. 

With improvements like 
the Symbols library and 


Dreamweaver 3 Fireworks 3 Studio 


IM | acromedia's bundling of its flagship Web 
design tools as Dreamweaver 3 Fireworks 3 


Studio seems like a smart move, especially now 


that Adobe is throwing ImageReady 2 in with 
Photoshop. Designers clearly think so too, given 
that more than 75 per cent of upgrade orders 
before the products’ release were for the new 
Studio version. With Studio, however, 
Macromedia has gone further than simply 


supplying two software tools in the same box. 
When you select an image for editing in 
Dreamweaver, it automatically opens Fireworks. 
There's also a wizard for copying and pasting 
HTML code produced in Fireworks into a 
Dreamweaver document. 

You can upgrade to the Studio from the 
version of Fireworks on our CD for £199 with our 
upgrade offer on page 97. 
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The new user interface in Fireworks 3 should help you speed through 
the process of optimising images from the Web. It allows you to 
preview your pictures in panels before saving them. 


preview panes, itseemsa 
shame that Macromedia has 
not paid more attention to text 
editing in Fireworks. You have 
to enter text in a dialogue box 
because the program does not 
allow you to type directly onto 
a Web page. Still, you can at 
least preview a font style 
before selecting it for your 
document and there's anew 
dialogue box that helps you 
substitute missing fonts. 

One of the most welcome 
additions to Fireworks is colour 
correction, with brightness/ 
contrast and hue/saturation 


filters now implemented as Live 
Effects. Not only may these 
filters be applied in real time, 
but third party filters such as 
Alien Skin Eye Candy can also 
be added to the palette. 

With a HTML wizard for 
exporting graphics and code to 
FrontPage, GoLive and other 
apps as well as Dreamweaver, 
Fireworks 3 is more flexible and 
powerful than ever before. 

Like Dreamweaver 3, 
Fireworks 3 has just gone on 
sale. Read our full review in 
issue 42 of Computer Arts, on 
sale from 23 February. CEE 


09 Mug @ 100% 


There's no need to fall back on other image editing applications to 
adjust colour and contrast settings. In Fireworks 3 these are built-in 
as real-time Live Effects. 
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< web special ee software news > 


NetObjects Fusion 5.0= 


The latest version of NetObjects’ Website design tool has just appeared. 
Now targeted at business and enterprise designers, what's new in Fusion 5.0? 


(preview 3. 


| 
( £199 exvat ) 
( £137 as an upgrade from 2.0 ) 


C NetObjects Per 
(: 0800 028 9851 ay 
€ Www.netobjects.com ) 


vx WYSIWYG web site design tool 

vx DTP-style HTML layout features 

¥ Asset management 

¥ Tree driven HTML source view 

¥ Internal publishing and site 
management tools 

yx Automatically generated 
navigation bars and buttons 

vy Cascading style sheets 


yr e-commerce wizards 


etObjects Fusion 
was born out of the 
24 Hours in 
Cyberspace project 
in 1996, which documented in 
extreme detail a whole day in 
the life of the Net. The team 
running the project's Website 
realised they needed a tool to 
speed up site design and 
management. The result was a 
company, NetObjects, and a 
tool, Fusion. Version 5.0 of 
Fusion has just appeared, so 
what's new, and what's 
changed in this latest release? 
Fusion is a complete 
Website design package, 
targeted at the small- to 
medium-sized business 
wanting to get itself on-line. 
You'll find that it comes with 
two main starter sites, a 
Company Internet presence 
and an Internal Intranet. 
Fusion's easy to implement site 
styles mean that any site 
created using Fusion will have a 
single look and feel, as well as 
a standard navigation 
metaphor. All you need to do is 
lay out the structure of your 
site, choose a style, and you're 
ready to start adding content — 
and even e-commerce features. 


oo 


Fusion's library of site styles is full of brightly coloured page and 
site design features, and helps you give your site a consistent look 
and feel. 
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When working with 
WYSIWYG Web page layout 
tools, you'll know that a 
graphical layout is never 
enough. Access to raw HTMLis 
essential, and this is a place 
where earlier versions of Fusion 
were sadly lacking. However 
things have changed with 
version 5.0, and a HTML source 
tab in the Page view means that 
you can get into the HTML 
document tree and modify the 
raw code of your pages without 
having to work with external 
editors. If you're an HTML guru, 
you'll find Fusion's Document 
Map tool a powerful guide to 
navigating your page's HTML. 

One of the more 
interesting features is the On- 
line tool. This takes you to a 
Website designed to hold site 
updates, and to give you 
access to information and add- 
ons. Unfortunately this is rather 
slow - and in the case of a copy 
installed ona NT 4.0 
workstation using /E 4.0, rather 
unstable. It's a pity, as this is an 
interesting concept, and could 
give Fusion the edge over some 
of its competitors. 

Instead of storing each and 
every page of your site as a 
separate file, Fusion uses a site 
database to store page 
components and manage your 
site's assets. It will also now 
create automatic backups, so 
you'll lose less work if a NOD 
file is corrupted, or your 
application crashes —which 
unfortunately did happen more 
than we'd like with the copy we 
previewed. 

NetObjects Fusion still lags 
behind Dreamweaveras a site 
design tool. Its template and 
style driven model means that 
it’s more of a 'fire-and-forget' 
tool. With Fusion, a designer 
can create a site's look and 
feel, as well as its layout, 
before handing the whole 
project over to a content team 
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NetObjects Fusion 5.0 has an improved user interface, with 
redesigned icons and menu bars. It's easy on the eye at the same 
time as giving you a DTP-style WYSIWYG page layout tool. 


Previous versions of Fusion didn't have an internal HTML editor. Now 
Fusion 5 gives you an HTML source view that's tied to your 
document's object tree - so it's ready for XML. 


who would actually build the 
Website. 

Fusion 5.0is an interesting 
development of a well- 
regarded tool. With a new focus 
on the small business market, 
Fusion is well targeted. Now 
beginners can use styles and 
drag-and-drop layouts, while 
more advanced users can add 
third party components 
(there's a whole rain-forest's 
worth of adverts for them in the 
box) and tweak the raw HTML 
of their pages. It's not another 
Dreamweaver yet, but version 
5.0 certainly adds a lot more to 
NetObjects Fusion. GES 


Code breaker 


Fusion 5.0 introduces a 
new HTML source code 
editor. This new feature 
also includes an HTML 
source tree tool, which 
allows you to see exactly 
how your pages are put 
together. Using this you'll 
be able to edit JavaScripts, 
and see which objects in 
your pages they control. 
This is especially useful if 
you're working with 
DHTML and the HTML 
document object model. 


the next step to e-commerce is inevitable ... 


take it now. 


You've designed a website and it looks great. Now you're ready to guide your clients through uncharted territory by offering them a safe 
and reliable online payment system. From developing a secure payment form to integrating a direct payment module into a transaction 
system, you'll find that ST offers the most powerful and flexible solution for web developers. You can drive transactions through the ST 
resilient network via direct HTML, Perl or Python scripts, ASP and COM objects on both UNIX and NT platforms. Enquire today about 


our partnership scheme for web developers which includes special discounted rates / cash incentives for resellers. 


freephone: 0800 028 9151 


www.securetrading.com * info@securetrading.com 


(Si: secure trading 


REAL-TIME CREDIT CARD PROCESSING FOR WEBSITES THAT PERFORM 


< web special 


24 | computer arts | web design special 


advanced interactivity > 
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THERE’S LITTLE WORSE THAN A FLAT, DULL WEBSITE. HERE ARE FIVE EASY WAYS 
TO GET MORE ACTION INTO YOUR WEB PAGES AND INTERACT WITH YOUR VISITORS 


here are far too many brilliant 
things about the Web to 
count. But one, and a key 
factor in its astounding 
success, is that unlike conventional 
design, Web design is alive. You can 
use it to present information and 
graphics that actually do something 
and interact with your viewer, offering 
you a whole new dimension of creative 
possibilities for getting your message 
across. And this goes much further 
than just hyperlinks and rollovers. 


Combining dynamic technologies such 
as JavaScript, CSS and Flash, you can 
add drop-down, pull-out and scrolling 
menus, Post-it style pop-ups with 
images and URLs, zoomable graphics, 
puzzles, games and far more. The 
possibilities are practically endless — 
and contrary to what you may think, it's 
actually not that hard. 


1 Back and forward buttons 


You can easily put back and forward 


buttons with your own graphics in your 
Web page, with two lines of simple 
JavaScript. JavaScript is the backbone 
of dynamic interactivity in HTML files. 
You don't need any special software to 
use it — Dreamweaver and GoLive both 
have JavaScripting tools, and Notepad 
or SimpleText will do just as well. It 
works just fine in both /nternet Explorer 
and Netscape at version 4, and almost 
every professional Website uses it. 

To create back and forward 
buttons, simply create a graphic for 


rtepialncludingtheopeninganssloaingscripttegs,antpasteltintotheheadaec 


@. Use Dreamweaver's Layers tool, 
in the Common section of the 
Objects toolbox, to draw layers exactly 
where you want them. The Properties 
Inspector then offers access to the key 
parameters for it - ID, position, Z-index 
(which means depth), background 
colour, and so on. 


each, then add these to your Web page 
as usual. Then set up a normal <A 
HREF> link from each, but put the URL 
for the back button to 
javascript:history.back(1), and the one 
for the forward button to 
javascript:history.forward(1). So it 
should look like this: 


<A HREF="javascript:history.back(1)">Back 
button here</A> 

<A 
HREF="javascript:history.forward(1)">For 
ward button here</A> 


It's that simple. 


2 Drop-downs 


Managing navigation and content 
space in your Web pages is one of the 
toughest tasks in Web design. One 
particularly striking and impressive 
solution is to offer a drop-down or pull- 


Dynamics with Dreamweaver 


How to work with layers and scripts in Dreamweaver... 
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Co. For further properties, you need 
to select Styles in your Launcher. 


Then hit the Style Sheet button and 


choose New in the dialog that appears. 


In the New Style dialog, choose 
Redefine HTML Style and select DIV. 
Now you can apply all kinds of 
formatting to the layer. 


out menu featuring all your links. To do 
this, all you need is a spot of simple 
DHTML, which combines JavaScript 
with Cascading Style Sheets. You can 
check out dropdown.htm on our 
coverdisc. 

First create the graphics for your 
header and dropdown — these can be 
imagemaps or rollovers. CSS uses 
layers, like floating boxes, which you 
give a name and then apply dynamics 
to. So create two layers (in 
Dreamweaver, GoLive or similar), one 
called ‘header’ and one called 
‘dropdown’. Then put your graphics in 
them, line the layers up as you'd like 
them to appear, and make the 
dropdown layer invisible. 

Now you need two simple bits of 
JavaScript to show and hide the menu. 
The first bit is a script telling the 
browser how to do it — here's the 
Explorer version: 
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citle>Untitled Document</ritle> 
fmeta http-equiv="Content-Type” content="text/html: 
harset=iso-8659-1"> 

style type="text/css"> 


( font-family: Arial, Helvetica, sans-serif: 
background-color: #9999FF; width: auto) 


> 
J style></head> 


body bgcolor="#FF9933" text="#000000" Link="#FFFFFF” 
Link="@FFFFFF* alink="#FFFFCC"> 


Co. Unfortunately, in Dreamweaver 
2, this will apply to all your layers. 
If you have several layers that you want 
to look different, you need a quick code 
fix. Select Window>HTML, and find the 
word ‘div' between the 
<STYLE>...</STYLE> tags, and change it 
to '#layer1', changing ‘layer1' to 
whatever you called your layer. 


<SCRIPT><!-- 

var dropstate=o 

function openclose(){ 

if (dropstate==o){ 
dropdown.stylevisibility="visible” 
dropstate=1 

return false 


else if (dropstate==1){ 
dropdown.stylevisibility="hidden" 
dropstate=o 

return false 


} 


} 
/1--></SCRIPT> 


It simply says, if the layer's hidden, 
show it, and if it's visible, hide it. You'll 
find full Explorer and Netscape 
versions on the coverdisc as 
dropdown_code.htm, which you can 
copy into your Web page. It goes in 
your <HEAD> section. The second bit 
of code you need tells the browser 


CS. Use the Script icon in the 
Invisibles section of your Objects 
toolbox to add a script to the head 
section of your page (view it via 
View>Head Content). You can just cut 
and paste scripts into the dialog that 
appears. Also, Dreamweaver offers a 
number of prefab scripts via the 
dropdown in your Behaviours palette 
and the Timeline. 
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< web special 


Adventures in South America 
uses DHTML on the cover 
Page with an interactive map, 
offering pop-up thumbnails 
and descriptions of places in 
South America when you roll 
over them. It's offers an ideal 
opportunity to tempt visitors 
into clicking on the link. See 
Ww www.fluid7.demon.co.uk/ 
adventures 


advanced interactivity > 


when to do this. You simply add a link 
to your header graphic, put "#" as the 
URL and include onClick="openclose()" 
inthe 


Pretty simple. If you want multiple 
dropdowns, call the layers header1, 


Pavone esin Z 


, 


Rurrenbaque, a jungle 
reserve in Bolivia 
This page is coming 


soon 


What's new? 


We've only been up for a 
month or so. The newest 
parts are this page, the 
Bookshop and the 
Guestbook 


amazon.con 


Beokshep 


Asmalls 
with revi 
guides, nove 


iting 
and more 


Dynamics in GoLive 


Using layers and scripts in Adobe GoLive 


As with Dreamweaver, you can 
just draw layers on your page with 
pixel accuracy. Use the Floating Box 
icon in the Basic section of your Objects 
palette. The Inspector then shows you 
the core settings for the layer, which 
you can adjust. 
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2 Again, to change other 

formatting properties of the layer, 
you'll have to go into a new window, via 
the CSS icon at the top-right of your 
Web page. Choose IDs, and you'll see 
your layer there. Select it, and use the 
Properties Inspector to change the 
formatting of your layer. 


dropdown1, header2, dropdown2, and 
so on. Use multidrop_code.htm on the 
CD for the script, and then in the 
headers' <A HREF> tags put 
onClick="openclose(dropdown1)", 
changing the dropdown number for 
each. 


3 Live rollover previews 


Rollovers are a really appealing feature 
to include in your Web pages, offering 
visitors extra information about links 
when they roll over them. Check out 
the interactive map at Adventures in 
South America (wwww.fluid7.demon. 
co.uk/adventures) and the portfolio at 
Terrarium (wwww.terrarium.nu), where 
preview images and descriptions 
appear for links. We're going to 
recreate something similar, first with 
just a description, for simplicity's sake. 
Take a look at description.htm in the 
Tutorials folder on the coverdisc. 

You could create all the words as 
GIFs and create the effect as a simple 
rollover or image swap in ImageReady 
or Fireworks — but this would bump up | 
your download time, and won't look as_—| 
good. DHTML is a far slicker option. 
First create your rollover buttons and 
add them to your Web page, then add a 
layer called 'preview' where you want 
the preview to go (don't worry about 
formatting for now, but set its position 
and width). Then you need a script to 
tell the browser how to show and 
change the description. Here's the 
Explorer script: 


This is a function called 'change' which 
changes the text in the preview layer to 
whatever we tell it 'words' should be. 
So finally, you need to say what these 
are, and also tell the browser when to 
do the swap. You do this in your links' 
<A HREF> tags using the onMouseover, 
just as with normal rollovers. Your 
rollover buttons will already have an 
onMouseover, something like 
onMouseover="swapimg(‘image1','im 
age1.gif')". Yours is going to be 
onMouseover="change('words')", 
changing 'words' for whatever you want 
the description to be. You put this 
within the same quote marks as the 
rollover onMouseover, with a semi- 
colon between. So it'll look something 
like this: 


Do that for every rollover. You also 
need to tell the browser to clear the 
words when you roll out of the button — 
so in the onMouseout of your rollovers 
you can put change("') -that's two 
single quote marks — which swaps the 
words for nothing: 


Back in the Layout window, 

Adobe's Actions offer a lot of 
prefab DHTML - set up a link and you'll 
find them in the actions tab of the 
Inspector. However, the output can be 
100 lines where only 5 or 6 are needed, 
and its easier to cut and paste in custom 
scripts, like those on the cover CD. 


To add scripts, drag the Script 
icon in the Head section of your 


Objects palette into your document 
head section (display it via the triangle 
icon next to the title of your page). Then 
double-click the script's icon to open 
the JavaScript Editor, where you can 
just paste scripts in. 


Case study: Terrarium 
Words of wisdom from a brilliant DHTML artist... 


1 ] errarium is Web designer Jason 

Hicker's on-line presence and 
DHTML showcase, with some of the 
best dynamics on the Internet. 

"It's nice not to require someone 
to have a plug-in to view your work," he 
says. "But Netscape and /E have some 
extremely important missing features 
that are difficult to work around. 
Netscape has a bug that can mess up 
the alignment of CSS objects when the 
window is resized." 

The cover page features a brilliant 


The Portfolio page at Terrarium uses a 
clever sliding thumbnail menu with 
pop-up word descriptions about the 
site to guide you. It's created with 
JavaScript and layers. 


onMouseover="swapimg(‘imaget’, image 
1.gif'); change('put your preview words in 
here')"> 


It's not that hard, is it? You'll find the 
full Netscape and Explorer script for this 
on the CD as description_code.htm, 
which you can just copy into your Web 
page. It includes extra code so you can 
easily control the style of the text, too. 

Now check out preview.htm on the 
CD. If you now want to include images 
in your previews like this, you need to 
change the script in the <HEAD> a little 
— it's on the CD as preview_code.htm. 
There's a space in there to preload 
your preview images so they appear 
instantly. You also need to change your 
onMouseovers to change (‘URL of the 
image',''words'), including the relative 
URLs of the graphics, and again the 
words you want. You also need to 
change your onMouseout to 
nopreview(), instead of change(''). The 
script includes a function that clears 
the preview completely. 


4 Animated rollovers 


Now for quite a different kind of 
interactivity — this time using Flash. If 


animation of the Terrarium logo 
forming from little squares. "I worked 
out on graph paper the X and Y 
coordinates of the blocks to spell 
Terrarium, and then put them into 
arrays," Jason explains. "Then | wrote a 
function to move the blocks from one 
coordinate to another.” 

"Someone is always figuring out 
how to get some crazy new 
functionality out of JavaScript or the 
browser that was never intended by 
the software designers... Figure out 
what you want to do, what you want to 


create, and then just try to do it. 
Innovate." 


See Terrarium at Wwww.terrarium.nu 


Terrarium's home page offers 
dragable layers, a scrolling news 
window and an unusual animated 
navigation device to offer something 
completely different. 


you're promoting products using maps, 
say, with animated rollovers you can 
offer viewers the opportunity to zoom 
in on the graphics. 

Flash combines interactivity and 
animation with vector graphics. 
Because vector graphics are, in 
essence, simply co-ordinates saying 
where shapes go, the files can be far 
smaller than for bitmap graphics, which 
store information for every pixel in an 
image. This also means vector images 
can be scaled up and down with no 
effect on the quality. So although Flash 
also supports bitmaps, you're better 
off concentrating on using vector 
graphics, created in ///ustrator or 
Freehand, for example. Alternatively, 
you can import a bitmap and select 
Trace Bitmap from the Modify menu. 
That way you can include far more 
interactivity and animation for 
download time. 

Making a graphic enlarge on 
rollover is simply an extension of 
creating a rollover button. Import the 
graphic as a vector, and set it to the 
size you want. Remember, it'll have to 
be detailed to make the zoom 
worthwhile. Then define it as a button 
via Insert>Convert To Symbol. Now 
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“Flash combines 
interactivity and 
animation with vector 
graphics. The files can 
be far smaller than for 
bitmap graphics” 


JavaScript 
resources 


Check out these sites... 


www. javascripts.com 


EarthWeb's massive resource of 
millions of scripts, many 
submitted by visitors. Some are 
half-baked, some are faddish - but 
you're bound to find something. 


www.devhead.com 


ZDNet's JavaScript resource, 
offering tutorials and free 
scripts. Again, there's a lot, and 
it's not all useful. 


www.ruleweb.com 


Jeff Rule's excellent and well- 
organised resource on all kinds of 
clever JavaScript and DHTML 
tricks - lots of really useful ideas, 
rather than faddish gimmicks. 


www.htmiguru.com 


A top DHTML resource with some 
truly brilliant dynamic design 
ideas. 


www.webreference.com 


An info-packed reference site for 
the serious JavaScript designer, 
with discussions and solutions. 
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first 


months 


First 9 Months, at w www.pregnancycalendar.com/first9months, must be one 
of the most beautiful sites on the Web, charting day-by-day the growth of the 
designer's unborn baby. Using simple rollover interactivity with a little 
animation and a great deal of imagination, it creates a lasting impression. 
(bottom) Design company Matinee's dramatic site, at w www.matinee.co.uk, 
uses Flash with animated rollovers and fantastic 3D vector animation. 


A quick rollover button in Flash 


The rollover button is the mainstay of on-line interactivity. Here's how to make one in Flash 


Flash makes creating 
interactive buttons incredibly 
easy. First, just create the basic shape 
for your button - don't worry about the 
details - or import an external graphic 
via File>Import. 
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eo. Then select your prospective 
button, and select Insert>Convert 
To Symbol (or hit F8). In the dialog that 
appears, select Button and give it a 
sensible name. If you haven't already, 
get out your Library palette via 
Window>Library, and you'll now 

see it there. 


“If you’re using a map, you'll want 
your viewer to be able to zoom in 
on different areas of the map. This 


isn’t too hard to fix” 


right-click and select Edit. In the edit 
screen, add a keyframe to the Over 
state (F6). Then select the button on 
that state, and use Insert>Convert 
To Symbol to define the Over state as 
amovie. 

Now right-click it and select Edit, 
this time to create the movie. Turn the 
graphic into a graphic symbol via 
Insert>Convert To Symbol, then put a 
keyframe at Frame 10, say, and scale 
the graphic up on that frame. Then go 
back and right-click Frame 1, selecting 
Create Motion Tween. Finally, double- 
click the last frame in your movie and 
use the Actions tab to put a Stop 
there, so the movie doesn't loop on 
mouseover. Then go back to your 
original Scene 1 and hit F12 to check 
out the button. 

In a similar way, you can include 
any Flash animation in a button state 
to create striking animated buttons. 


5 Zooming maps 


If you're using a map, though, you'll 
want your viewer to be able to zoom in 
on different areas of the map. This 
isn't too hard to fix. Import your map, 
and convert it into a graphic symbol via 
Insert>Convert To Symbol, so you can 
tween it later. Now, on separate layers, 
either import again or draw over your 
map shapes for each of the hotspots 


Co. Right-click your button or its 
name in the Library, and select 
Edit. Now you can add details for your 
default, Up state, and add further 
states. To do this, select a state in the 
timeline, hit F6 to add a keyframe, and 
make your adjustments - or import a 
new graphic via File>Import. 


you want, which will zoom in on the 
map on rollover. Convert each of them 
into buttons, and double-click each to 
open up its Properties. Using the Color 
Effects tab, select Alpha from the drop- 
down and set it to O per cent, so the 
map shows through. Now you can right- 
click and edit each button to add any 
rollover effects you want — of course, 
you'll have to remove the transparency 
for states with effects. Also, be sure to 
give each button a sensible name, or 
you'll get confused. 

Next you want to create the zooms 
for each area. First, though, get back 
to your original Scene 1, double-click 
Frame 1 and use the Properties 
Actions tab to place a Stop there. 
| Now double-click the button for 
| your first zoom area, and in its Actions 
tab, add a Go To action. Change the On 
command for whatever mouse action 
you want it to zoom in on, and set the 
Go To to Frame 10. You also need to 
add a Go To command on Roll Out or 
Release, to send the movie back to 
Frame 1. 

Then select Frame 10 and add a 
keyframe on all layers, with a useful 
label for the zoom for your first area. 
Then, at Frame 19, add another 
keyframe on all layers, then select all 
your map graphics, including buttons 
and select Scale to enlarge them. You 
need to keep the centre points of the 


Co. Finally, click Scene 1 (top right) 
to exit this mode, select 
Control>Enable Buttons, and test your 
rollover onscreen. To make it do 
something, right-click the button 

and select Properties. The Actions 

tab offers access to various 
interactivity options. 
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Rock Star Games, at 
www.rockstargames.com, 
combines colourful design with 
clean, fast interactive animation 
to document the funky lifestyle 
with considerable funk of its own. 


area you're zooming on aligned 
throughout the zoom, so click the 
Onion Skin Outlines icon at the bottom 
of your Timeline, and use the selector 
at the top of it to include Frames 10 
and 19. Now move all your map 
graphics on Frame 19, so the zooming 
area centres properly with its normal 
size at Frame 10. 

Now go back to Frame 10, select 


“Don’t stop there. Be 
sure to experiment 
and push the 
boundaries, and 
people will return to 
your site again” 


Interactive animation in Flash 


So now you want to make your buttons do something? 


First make yourself a basic 


background and a few buttons for 


different pages. Since Flash is fast 
because it uses vectors, it's probably 
best to create this in Mlustrator or 
FreeHand, or if you do use a bitmap, 
vectorise it via Modify>Trace Bitmap. 
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oC. To add a rollover pop-up for a 
button, select Frame 5 and hit Fé 
to create a keyframe there. Now 
create your pop-up - a thumbnail and 
description, say, or you could import 

a mini Flash movie for an animation. 
Double-click the frame and give 

it a Label. 


all its layers, and right-click to set up a 
motion tween. Then double-click the 
button's layer at Frame 10 and set up 
a Play action in the Actions tab. You 
also need to put a Stop action on 
Frame 19. 


Repeat this for each of your areas, 


and you're done. You can now 


superimpose further buttons over your 


map, linking to different pages, say. 


And that’s our five simple ways to 
add a spot of interactivity and life into 
your Website — but don’t stop there. Be 
sure to experiment and push the 
boundaries, and people will return to 
your site again and again. GE 


Flash 4 costs £304 {upgrade £92), and is avail- 
able from Computers Unlimited on t 020 8358 
5857 or W www.macromedia.com 


Case study: Claydon Heeley 


Subnet reveals its love of Flash... 


| ») esign company Subnet used Flash 
to create a fantastic new site for 


the advertising company Claydon 


Heeley, at wwww.claydonheeley.com. 


"Flash is interactivity on the 


Internet," says designer Jake Smith. "It's 


easy to get to grips with and has 
enormous depth for advanced users. 
DHTML is just an advanced form of 
HTML, but Flash isn't constrained by 
any of the same parameters.” He 
continues: "When a Website is in full 


swing, it's a great atmosphere in the 
office. A lot of ideas are implemented 
on the spot." 

"Learning Flash is along term 
project — don't expect to know it all 
after a month. But don't be put off by 
that. It's how you design with what you 
know that makes a site look good. 
Sometimes it's best to keep it simple." 


See more of Subnet's Flash sites via 
W www.subnet.co.uk 


Subnet's new site for Claydon Heeley, the advertising company, uses Flash to 
create a story about breaking into the boss' office and rummaging through his 
desk to get as much ‘secret’ information about the company as possible. 


CS. Now go back to Frame 1 and 
double-click to get its Properties. 
In the Actions tab drop-down, add a Stop 
so the movie doesn't automatically play 
through to Frame 5. Now open the pop- 
up button's Properties dialog, and in the 
Actions tab drop-down select Go To. 


Gotoand Stop") 
EndOn 


Go to and Stop (1) 
nd On 


Co. You need to change the On 
Release to Roll Over - click on it 
and use the radio buttons. Then select 
Go To and Stop, and choose Label to 
select the name of the frame your pop- 
up is on. Finally, add a Go To for the Roll 
Out to go back to Frame 1. 


WARNING: 


Your domain names and web sites could be AT RISK if you 
register or host them with a No-Name company. 
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Fireworks 


ILLUMINATE YOUR SITE WITH THE ELECTRIFYING WEB GRAPHICS TOOL 
FROM MACROMEDIA — THE FULL VERSION’S ON OUR COVERDISC... 


ireworks is a fantastic tool for creating 
graphics for the Web, and it's easy to use 
too. The full free version of Macromedia’s 
Fireworks 1 on the CD includes vector 
drawing, photo editing, text and effects tools, not to 
mention easy rollovers and imagemaps with auto- 
HTML. It's a real scoop! 
For this tutorial, we're going to create a simple 
but striking interactive start page graphic, which you 
can just paste into a normal Web page. It begins with 


vector drawing, working with text and applying effects. 


Then we look at enhancing photos to include in your 
graphic. Finally, we show you how to create rollover 


interactivity and then compress your design so it 
donwloads quick. It's very easy, but the result is 
extremely professional. All you need is your copy of 
Fireworks 1 and the four JPEG files on the CD. Our 
Fireworks PNG files for each stage are on the CD too. 

You need to install Fireworks 1 via the CD 
interface, and then you'll have to go on-line to 
Wwww.macromedia.com/uk/fwpromo to register 
with Macromedia and get the unlock key. 


For more details about Fireworks, visit W www.macromedia.com or 
t 01344 458 600. See page 97 to upgrade to Fireworks 3 for £99 or 
Dreamweaver 3 Fireworks 3 Studio for £199. 


Stage One: Drawing, text and effects 
Light up the sky with Fireworks and its powerful graphic features 
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Co. Select File>New to create a new 500x400-pixel 
document. Use the Custom colour tab to give it a 
bright green background colour. Then hold down your 
Rectangle tool in the toolbox until it pops out, and 
choose the Ellipse tool. 


Layers | Frames | 
3} 
[Frame 1 | alo 


Rackonuard 


Co. Select the smaller circle only, and copy it. Now 
find your Layers palette and click New Layer in its 
drop-down. Click Control+V (PC) or Option+V (Mac) to 
paste a copy of the smaller circle on this new layer. 
Then click in the second column by the layer called 
Foreground to lock it. 
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o. Next, make sure your text is selected, hold 
Shift and click your circle on the new layer to 
select that too. Then select Text>Attach to path. This 
runs your words around the circle. Use the Transform 
tool to resize the text so it fits well between the 
circles. Then double-click the text (it's still editable) 
and adjust its size and letter spacing so your words 
fit perfectly. 
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Co. Draw a large circle, click the Fill tab in your 
Brushes And Fills Palette, and select the colour 
swatch there. Now you can give your circle a blue fill by 
Clicking on a colour in your Swatches palette to the 
right. Click the Brush tab and change the colour of its 
outline in the same way, setting the brush to Normal 
and Soft Line in the drop-downs. 


CG. Select your Type tool and click somewhere in 
your image. In the Text Editor that appears, 
choose a font - we're using Nasal - and set it to a fairly 
large size - say 45 points. Write in the name of your 
Web page, and hit OK. Now get your Fill palette as 


before, and use the drop-down by the Folder icon to 
select Radial. 


Co. Now lock this layer and unlock your Foreground 
layer. Drag to select both the circles there, and 
select Modify>Join to combine them into a Polo shape. 
Then in the same way as before, draw a series of four 
circles for your links in an arc around your main circle. 
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Select then copy and paste your circle, then 
select the Transform tool to resize the pasted 
circle. Make it quite a bit smaller than the first circle. 
Next, select your Pointer tool (top left) and drag across 
both circles to select them both. Then use the 
Alignment drop-down in your Modify toolbar to centre 
them horizontally and vertically. 


This creates a Radial gradient, but you need to 

change the colours. In the right corner drop-down 
in your Fill palette, select Edit Gradient. In the Edit 
Gradient dialog, double click the colour patches to 


change the colours, and click Apply to see how it looks. 
Hit OK when you're satisfied. 


Get your Line tool and draw lines connecting 
the orbiting circles to the central one, then select 
everything on the Foreground layer and select 
Modify>Join. Finally, click the Effects tab on your Fills 
and Brushes palette and select Drop Shadow in the top 
drop-down menu. Experiment with the settings here. 
Compare stagei.png on the CD to what you've got. 
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Stage Two: Adding photos 


Now to make the most of Fireworks’ photo-editing tools 
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Double-click the Foreground layer and rename 
it Circles. Unlock the layer with your words on it, 
rename it Text, and double-click the text to edit it. 
Change the words to 'Digital Cameras’, and use the 
letter spacing slider just below the Font drop-down to 
make the words fit smoothly. Click Apply to see how it 
looks, and OK when you're happy. 


In the Tool Options palette, check Tolerance is 
set to 32, and Anti-alias is selected in the drop- 
down. The Magic Wand 'magically' selects continuous 
areas of the same colour; Tolerance specifies how 
similar the colour has to be. Click the white area of the 
camera image to select it, and the Delete to clear it. 
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Layers | Frames | 


Then hold Alt and carefully draw around the 
area you want to deselect. Alt-selecting 
subtracts from the current selection. If you overdo it, 
hold Shift and draw an area to add to your selection. 
Then hit Delete to clear the white area, zoom out, exit 
Bitmap mode, and finally scale and place your cutout 
on the last link circle. 
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Co. Copy the four JPEG files from the CD onto your 
desktop, then in Fireworks lock your two layers 
and create a new layer called Photos from the Layer 
palette corner drop-down. Select File>Import, or hit 
Control R, and browse to the first of the JPEGs, 
olympus.jpg. Hit Open and Click anywhere in the screen 
to place the image. 


Select your Pointer tool (top left, or just hit V) 
and click outside the image to edit Bitmap mode. 
Now get your Transform tool and scale and position the 
image of the Olympus camera so it roughly fits in your 
top link circle. Then, cut out and scale the fuji.jpg and 
nikon.jpg in the same way, placing them on the next 
two circles. 
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Now to apply a slight drop shadow to the 
cameras. Select your top camera, and in your 

Effects palette select Drop Shadow, and use the 
Opacity slider to make it quite transparent - say, 35 per 
cent. Now copy the camera in the Edit menu, click-drag 
to select your other three cameras, and select 
Edit>Paste Attributes. This applies the same drop 
shadow to them. 


Double-click the photo to go into Bitmap mode, 
where you can edit the photo just as in 
Photoshop. Click and hold your Lasso tool until you get 
a pop-out different tools in it. Choose the Magic Wand, 
the last of the three. Then double-click your Magic 
wand tool to get the Tool Options palette. 
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CG. You want to do the same with Sony.jpg, but the 
cutout will need tidying up. Import it and select 
the white area with the Magic Wand. You'll see you 
need to deselect and area to the top right. Use the 
drop-down in your View Controls toolbar to zoom in to 
200 per cent, then click and hold the Magic Wand icon 
to select the Lasso tool. 


Co. Finally, the cameras look a bit dark, so you 
want to brighten them up. Select all four, and 
choose PhotoOptics>CSI Levels from your Xtras menu. 
Set Hard Light to about 105 per cent and Exposure to 
about 8 per cent. Click OK for each camera. Now you 
can check out Stage2.png on the CD, and compare what 
you've got. 
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Co. First dig out your URLs toolbar. Then create a 
new layer in your Layer palette drop-down called 
Mouseover. Select and copy all your cameras and paste 
copies of them on this new layer. The idea is to create 
different images for mouseoff and mouseover states 
for a rollover on different layers. 


GC. Select the Slice tool in your URLs toolbar, and 
drag from your rulers to add guides around each 
button. Select View>Rulers if your rulers aren't visible. 
Check View>Snap To Guides is on, then use the Slice 
tool to draw a slice around your first button. In the 
Object properties that appears, select Rollover from 
the Slice Type drop-down, and leave the rest for 

the moment. 


Stage Four: Exporting 


Stage Three: Adding rollovers 


With a little help from Fireworks anyone can hit the rollover jackpot 


Then click the eye in first column next to the 
Mouseover layer name to make it invisible. We're 

going to edit the images in the Photos layer and use 
them for the mouseoff. Select the top cameras on this 

layer and select Xtras>PhotoOptics>CS! PhotoFilter. 


Browser Status Bat Meszage: 
Olympus camera 


CG, Select new Link from the end drop-down on 
your URLs toolbar, and put # in here. Normally, 
you'd add the URL of a page to link to. Put some words 
in the Status Bar field too. Then draw slices over your 
other cameras, selecting # in the Link To field, and 
Rollover as the Slice Type. 


The finishing touches and our graphic is ready for the Web 
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Co. First click C for the Crop tool and draw a crop 
area tight around the edges of your image. Click 
Crop in the Tool Option to complete the crop. Then 
Select File>Slice Defaults, and in the dialog check the 
Format is set to GIF. Experiment with different settings 
in the drop-downs below to see how small you can get 
the file, and use the buttons at the bottom to move 
between frames. 
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Generate Demo Rollover HTML 


We went for WebSnap Adaptive 64. Click Save 
& Close when you're ready, and then select 
File>Export Slices. Check Put Images In Subfolder, give 
the subfolder a useful name, and check Generate Demo 
Rollover HTML. Then hit Save. 
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oC. Slide the Saturation and Brightness sliders up 
and try various settings to change the colour of 
the camera. It looks good with Hue 231, Saturation 100 
per cent and brightness 34 per cent. Then hit OK and 
check you like it. Select the other three cameras and 
choose Repeat CSI PhotoFilter from the Xtras menu. 
Hit OK for each camera. 


bs. 


Click the Frames tab in your Layers And Frames 

palette, and select Duplicate Frame from the 
drop-down. Click OK in the dialog, then go back to your 
layers palette and check that the Mouseover layer is 
visible and Photos is invisible. Then choose Frame 1 in 
the drop-down, and check that Mouseover is invisible 
and Photos visible. Compare what you've got to 
stage3.png on the CD. 


Co. Finally, find the HTML file, wherever you saved 
it, and open it in Internet Explorer or Netscape 
Navigator to check out your Web graphic, and make 
sure it works. You're done! Here's our final file viewed 
in Explorer - it's on the CD as Stage4.htm. EI) 
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[TUTORIAL] 
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Fusion 2.0 


DISCOVER ALL YOU NEED TO KNOW ABOUT CREATING A SITE WITH 
NETOBJECTS FUSION — FROM START-UP TO PUBLISHING A LIVE SITE 


his month's CD contains a complete, ready 
to use, copy of NetObjects Fusion 2.0. 
Fusion is a Website design tool — not just for 
creating HTML pages, but for designing and 
managing large sites. Using it, you can quickly create 
sites with a consistent look and feel, thanks to a 


library of site styles and a selection of site templates. 


Fusion is more like a DTP package for the Web 
than anything else. You can use it to lay out the 
contents of a site, page by page, without creating any 
content. The navigation bars used on your pages will 
be created automatically, leaving you with the job of 
choosing a site style, and adding content to your 


Pages. You can even create pages that Fusion will fill 
with the contents of a database on publication. 

This tutorial will take you through the whole 
process of creating a Website in Fusion — showing you 
how to create a site, and then how to lay out and 
manage your pages, before you finally publish it to a 
server, ready for the Web. 

If you want to see what the current version of 
Fusion can do, there's a preview of the latest release, 
NetObjects Fusion 5.0, on page 22. 


You can upgrade to version 5 of Fusion for £137 on page 87. For 
more details phone t 0800 028 9851 or see W www.netobjects.com 
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Mastering NetObjects Fusion: Design a site with style 
Step-by-step, everything you need to know about publishing on-line with Net Objects Fusion 2.0 


© Other Template 


© Local Site Import 


When you first launch Fusion, you'll see a 
dialogue box. You'll need to fill in the name of the 
site you're creating, and then choose the site template 
you're going to use. We've started creating a Company 


Internet site, a set of pages used to set up a corporate 
Web presence, 


Fusion gives you a library of site Styles that 

can be applied to all the pages in your site, giving 

it a consistent look and feel. These have been designed 
by some of the more influential Web design houses, 


including Siegel and Gale and Studio Archetype, as well 
as NetObjects' own designers. 


Go. Once you've chosen a look and feel you can 
start working with your site's pages. Fusion 
works like a high end DTP package - so you'll need to 
lay out text and image areas on the page. However the 
Company Intranet creates boilerplate pages, so all you 
need to do is add your own text and images. 


Co. Fusion will automatically create a selection of 
Pages, and will set up the links between them. 
This is displayed as a Site structure view in the form of 
an organisation chart. The Company Internet template 
includes information pages and a product catalogue. 


Co. If you want a more detailed view of your site, 
then you can choose the Outline view. This gives 
you more information about your pages, including 
whether they've been edited and whether they can be 
published to a Web server. 
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Of course, you're not limited to the images 
provided by NetObjects. If you want to customise 
a style - maybe changing some of the colours, or 


adding new images, you can edit the individual 
elements of any style. 


CG. You don't even need to use the site Styles 
provided by NetObjects Fusion if you've already 
got your own corporate look and feel. You can create 


your own style, and then add elements and design rules 
as required. 


T Extent HTML | 
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Co. One of the most important tools in Fusion is its 
Properties inspector. This is a floating palette 
that you can use to set the properties of any element 
on a page or in a layout. You can use it to control local 
formatting and appearance. 


The Tools palette is another important tool. 
From this you can pick and choose elements and 
components that will be added to your pages. These 
include images, tables and text, as well as ActiveX 
controls, database connections and Java applets. 
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Mastering NetObjects Fusion: continued 
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When you're working with text you can use the 
Properties inspector to pick and choose the font 
you're going to use, as well as the size and colour of 
your text. You don't have to work with whole 
paragraphs - you can use this with individual letters 
and words. 
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Once you've created your static pages you can 
start to add database-created pages to your site. 
Fusion 2.0 won't produce live links to databases — 
however you can create ‘stacked pages' which are 
created from the contents of databases when you hit 
the Publish button. You'll need to create a master page 
to give your users access to your stacked pages. 


Once you've selected a data store, you can 
then select the elements that will be displayed in 
a data list - which will be used to navigate between the 
stacked pages. It's a good idea just to choose a pair of 
key elements for the data list, and then to select all 
the fields for a stacked page. 
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You can also use the Properties Inspector to 
change and add new images. It's possible to 
convert images to links and anchors, as well as 
controlling transparency, image-map hotspots and Alt 
Tags. It's a good idea to get familiar with the 
Properties inspector early on in working with Fusion. 


o. If you look in the Site View you'll see that a 
different icon from that used for static HTML 
pages shows stacked pages. The page properties will 
also show that a page is in fact a collection of pages 
created from a database. 
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G, Fusion will automatically create a layout for 
your site's stacked pages. This is unlikely to be 
what you want to see - as this example page shows. 
You'll need to re-design the page layout in order to 
create a good-looking catalogue. 


Fusion uses Master Borders to control where 
navigation elements are held, as well as titles 
and footers. You don't need to load these every time, 
and you can use Master Borders as the basis for a 
frames layout - just choose the borders you want to 
turn into frames. 


Once you've started to create a database 
connection you'll need to add a data source to 
your pages. This can be an internal data source, with 
the data stored in Fusion itself, or an external data 
store - either an Access database or an ODBC data 
connection to a large SQL database. 
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Once you've moved the elements around, and 
deleted those you don't need, you'll end up with 
a much more presentable page. Unfortunately the 
sample data doesn't show you exactly what you'll see, 
so you may want to preview the pages by publishing 
a local copy of your site. 
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Mastering NetObjects Fusion: continued 


When laying out pages, Fusion gives you the 
basic tools you need - so you can use it to add a 
table to your pages, adjusting the contents of a cell so 
that it can contain images or text, as well as changing 
the border size and spacing. 
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Fusion stores all the elements of your site ina 
database before publication. You don't get 
access to the raw HTML of your pages until you've 
published them. The assets view allows you to see 
the files you've included in your site - usually 
images and how big they are, as well as the original 
source locations. 


Once your site is complete, you can publish it. 
Fusion uses a three-stage publishing process. 
You'll need to set up the details of the site you wish to 
use, as well as any staging or test sites. Then click on 
the relevant button to start the publishing process. 


If you're adding an image to your pages you 
can use the image tool to create an image layout 
object. Once you've done this, you're then able to add 
images either from a file, or from Fusion's own asset 
database. Any image you've used in your site is added 
to this, so you can reuse assets without having to re- 


So. Links are also assets, and you can use the Link 
page to see what links are in your site, as well as 
test any external links to make sure that the pages 
you're linking to still exist. You can also see what 
types of link are in your site - internal, external 

and structural. 


Fusion 2.0 contains its own FTP client, so you 
can publish to a remote Web server. This is 
especially important if you're using a third-party site 
host. You may need to ask your support team for the 
details you need to fill out this dialogue box, but 
once it's complete you're ready to put your Fusion 
Website on-line. 


You can also use the tool palette to add 
navigation bars and title banners to a page, which 
can then be used as the basis of a new set of master 
borders. You'll probably want to create a new set of 
navigation bars and their corresponding borders for 
each level of your site - as what will work at one level 


If you've included data objects in your site, the 
assets view will show you the data objects 
you've created, and allow you to access and modify 
their properties. If you do change anything, you'll need 
to test your pages to make sure that the stacked pages 
are still created correctly. 


To publish - just go on-line, and click the 
Publish button. A progress bar shows your pages 
uploading to the server. Once it's done, launch your 
Web browser and test out your new Fusion site. 
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Stop Reliesh Home 


Wave Games has been trading since 1987 salling surfboards 
bodyboards, wetsuits and accessories. We pride cmnachest in the 
fact that we can offer sound advice on the many products. that 
we sell, which is why our customers come back time and time 
again. 


We offer a wide range of top branded surfwear and snowboard 
elnthing for man, waman and kids hy Quiksilver, Rip Curt, 
Headworx, Billabong, Rusty, Hawaiian Island Creation and shoes 
by Reef and Vans, 


In the summer of 1999, due to popular demand, Wave Games 
tnoved premises and the shop is now located right in the heart 
of Taunton town centre, making it accessible to 


Seatch tonnes History r ail  RleaGude 


www. plantphoto.com >| @Go Links 


2) My Computer 


Although Headstate is less than a year old, the company's 
portfolio is as varied as they come. At the top left is a site 
developed for Studyline, an educational service providing 


01999 Wave Gamer | derigned by Meadstate 
All trademarks and registered trademarks are acknowledged, 


maths training, while to the right is the Wavegames site - the 
on-line presence for a local surf shop. Above is one of 
Headstate’s most highly praised pieces of work. The Plant 
Photographics site is impressively designed and is generating 
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“We want to make sites richer. There 
are so many Amazon-style sites out 
there. It's got to be a bit richeranda 
bit different,” says Chris O'Shea, 
founder of Headstate 
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work and exposure for the photographer behind it. 


ith the sharp upsurge in the number of homes 

getting on-line, businesses large and small are 
realising the need to get Websites. Net-savvy 
consumers up and down the land want to use the 
Web to find out about goods they're interested in, compare 
prices and buy online. While big national and multinational firms 
can turn to the estabilshed, corporate Web design agencies, it 
doesn't make much sense for local and regional businesses to 
get their Web design done in London. 

That's where smaller up and coming Web design studios 
like Headstate come in, catering to the online marketing needs 
of clients like garden centres, surf shops, photographers, 
painter-decorators and so on. Digital design start-ups needn't be 
daunted by the prospect of competing with the likes of 
Blueberry, Deepend or Subnet - there's money to be made, and 
in the hurly-burly world of dotcoms a good reputation can be built 
with haste. 

Founded on 1 July 1999 in Taunton, Headstate is headed up 
by Chris O'Shea. "| wanted to get into the games industry a long 
time back, and then once | started getting into Web design about 
three years ago | knew that's what | wanted to do," says Chris. "! 
looked around and there were no decent companies around here 
and | knew that we could easily do the work so we decided to set 
up our own company." 

The next step was to decide what sort of identity the 
company would build up. Rather than going down the corporate 
services route, 18-year-old O'Shea has chosen a youthful, funky 
image. "We want to deal with the music industry, the computer 
games industry and fashion — the trendier side. That's what 
we're going towards," he explains. 

"We've got the edge because we can be more fresh and do 
more interactive design than some of these corporate 


Ww 
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the right look and feel 


Headstate are in the process of developing the look and feel of their site, combining useability with attractive design... 


Here's an early interface screen Headstate 
designed when it was first set up. A simple bar of 
buttons to the top right takes users to the various 
parts of the site. Simple and tidy - here's the 'who we 
are' screen. 


companies. We haven't necessarily got a huge edge over the 
biggest companies — they've got 50-odd employees, all with 
different ranges. At this stage we haven't got the edge over 
them in terms of size, but we'll easily catch up and produce 
much better designs over the next year." 

Chris O'Shea has been joined by programmer/designer Guy 
Tucker and the pair have major big ambitions to grow their 
business. Currently they work from home on desktop PCs 
running Dreamweaver, Fireworks, Flash and Photoshop, but the 
next step on the agenda is to move into a studio and get Macs. 

Meanwhile their reputation is growing in the South West. 
Having done sites for small companies like Plant Photographics, 
Bike Zone and Wave Games, they're now generating most of 
their business purely through word of mouth. "They would have 
nothing bad to say," says Chris. "They're helping us by telling 
everyone how good we are. That's the way it works." 

Next year they hope to take on more staff and also to 
branch out into CD-ROM multimedia. There are already three 
projects lined up in this field. However Web design will continue 
to be central to Headstate's plans and with the help of a 
freelance programmer they're ramping up to offer e-commerce 
and on-line sales facilities to their clients. 

They might be young, and just a small firm at the moment, 
but Headstate is the kind of company that serves to inspire 
other new Web designers as they set out. "We'll see a site that a 
big company's done and we'll say ‘We can do better than that’," 
says Guy Tucker. "There's a lot of terrible sites out there on the 
Internet, aren't there?" FEI 


Contact Headstate on t 01823 323 494 @ studio@headstate.co.uk 
W www.headstate.co.uk There are links to most of their clients’ sites 
at the Headstate Website. 
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Building up the image. Carrying over the blue 
and the company logo, Headstate is currently 
working on pictures that might fit in with the style. This 
is actually a photo of the back of a friend's head. 
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interactive media design 


Here's an innovative interface design. Inspired 
by a lava lamp in the office, the Flash-animated 
bubbles on the left float upwards. Rolling over the 
bubbles reveals where they lead. However in testing 
new users didn't really understand the concept so 
Chris O'Shea may adapt it or reject it. 
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Suspension: Manitou X-vert Carbon 7" travel 

Crank set: Shimano XTR 5-arm 50 teeth 

Shifters Shimano XTR 

Rims: Rigida DH 32 hole 

Special: Footwork chainguide, inegrated headset 


Frame sizes: 43 /48 /53 8 cm 


Colour: Black 
roma! Aluminum 7005, Y-Design,semi active full 
suspension. 
_ Manitou Magnum R, 76 mm travel, DNM 
Suspension pVv22. 
Crank set: | Shimano Acera. 
Shifters: Shimano Alivio. 
Rims: Weinmann Zac 19R Black 32 hole. 
Special: Dise brake prepared. 


Frame sizes: 43 /48 53 58 cm. 


Colour Metal blue. 
a Renae Aluminum 7005, Y-Design, active full 
\ suspension 
k Manitou Mars Carbon, ONM ST 12 RC with 
ta YS Suspension remote lock-out 
rss Prank cat Shimann Nenre XT Holimw Tach 


Creating Tomorrows Environment 


Enter > ; 


Here are two of Headstate's more recent creations. 
BikeZone is a site designed for a successful cycle 
shop. Meanwhile, the Parsons site was designed 
for a commercial landscape design company, and 

is going live on-line as we go to press. 


Turn the page for a Flash 
walkthrough hosted by Headstate => 
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Stage One: Drawing tools... Create a Flash animation 


Learn from the pros as Headstate show you how to design your own animation in Flash. We've included the demo of 
Flash 4 on the CD, and you'll also find the necessary files in the Tutorials folder on our disc... 


The first thing to do is set up our movie. Go to 
Modify>Movie. Sct Movie Width to 636 pixels and 

the Height to 314 pixels so that it fits perfectly within 

a browser window. Click on the background colour and 


Co. When you start Flash you will be presented 
with a blank white movie. Across the top of the 
screen is the Timeline which controls the movie's 
contents using layers. The toolbox lets you draw, 


Now to draw some waves. Select the Line tool 
from the toolbar and draw some straight waves in 
a triangle shape. Select the Arrow tool (mouse pointer) 
and drag the centre of the lines to curve them. Draw 


transform and edit objects and text. 


Co. Make sure the waves overlap the edges of the 
movie area. To fill in the water colour, the area 
needs to be enclosed with no gaps. Draw a border 
around the movie that goes from the edge of the far 
left wave, down and around to the edge of the right 
hand wave. 


Insert a new layer called 'text layer' and use 
the Text tool to type 'Need some fish food?'. 
Select the object and go to Modify>Group to group the 
text. To convert it to a symbol, go to Insert>Convert to 
Symbol. Using symbols makes it easier to animate and 
edit the objects. Click View>Antialias Text. 
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change it to a light pale blue. Click OK. 


Now we need to add a new layer above the 
existing layer. Go to Insert>Layer. You will see a 
new layer appear in the Timeline. Go to Modify>Layer 
and in the name box type ‘sand layer’. Click OK. Any 
objects inserted into the sand layer will appear above 
any objects in the first layer. 


In the text layer go to frame 30 and Insert> 
Keyframe. Go to the first keyframe in the text 
layer, click Modify>Frame and click on the Tweening 
tab. Now select Motion from the menu and then click 
on OK. Motion Tweening tweens an object along a 
straight path. 


the waves all the way across the top of the screen. 


Select the Pencil tool. Use the toolbar to 
change the type of line to Smooth and the colour 
to a pale yellow. In the sand layer, draw a rough shape 
that goes along the bottom of the movie. Make sure 
that the two ends of the line meet and use the Paint 
Bucket to fill in the colour. 


We’re going to make the text fly in from the 
left of the screen. Go to the first keyframe and 
drag the text object so that it is just outside the left 
hand side of the screen. On frame 30, the text should 
be in the centre of the screen. Play the movie 
(Control>Play) and the text should fly in. 


So. We are going to make some text implode. Each 
letter is going to be scattered around the screen, 
and they are going to fly in together to create the word. 
Insert a new layer called 'text effect’ (Insert>Layer). 


Use the text tool and a funky font to type the word ‘fish 
tank’. 


Each letter needs to be on its own layer so that 
we can apply motion tweening. So Insert>Layer 
for each letter. Edit>Cut a letter and Edit>Paste the 
letter into its layer. Give each layer a recognisable 
name. On each layer, insert a keyframe on frame 110. 
When cutting and pasting each letter, paste it on to 
frame 110. 


Co. Now we are going to import an image. Go to 
Insert> New Symbol and call the symbol ‘fish’. 
Click File>Import and select fish.swf (on the CD). This 
imports the image inside the symbol. To get back to the 
main movie click Edit>Movie. 


uo. @ 


> 


Use the Magnifier tool to zoom in on the text. 

The text needs to be broken apart so that each 
letter can be used individually. Select the text object 
and go to Modify>Break Apart. You can click on each 


On each layer, insert a keyframe on frame 125. 
Modify>Frame to add motion tweening to the 
keyframe on frame 110. Grab each letter and move it to 

somewhere within the water. Use the Modify> 
Transform menu to rotate, flip and scale each letter in 
a random fashion. 


Co. Create a new layer called ‘fish swim’ and insert 
a keyframe on frame 40. Go to Window>Library. 
The Library contains any symbols, movie clips or sound 
effects used in the movie. Drag the fish symbol from 
the window on to the right hand side of the movie in 
frame 40. 
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Each letter has to be added to the Library as a 
separate symbol. When you do this give the 
symbol an easy to remember name (ie ‘ish-h' would be 
a good name for the H letter from the word fish). Select 
a letter and Insert>Convert to Symbol. Repeat this for 

each letter, giving it a recognisable name. 


Each letter is going to 'appear from nowhere’. 
To do this the text has to be transparent on frame 
110 and then full colour on frame 125. On frame 110 
select a letter symbol. Go to Modify>Instance and click 
on the Colour Effect tab. Select Alpha from the pull 
down menu and set the value to 10. Repeat this for 
each letter. 


Now we’re going to make the fish swim across 
to the left hand side of the movie. Insert a 


keyframe on frame 80. Drag the fish symbol outside 
the left-hand of the movie. Go to Modify>Frame and 
turn the motion tweening on. 
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Motion guides Now it's time to blow some bubbles 


On the fish swim layer, insert the fish symbol 
just outside the left hand side of the movie. Use 
Modify>Transform>Flip Horizontal to flip the fish. 
Insert two keyframes on frames 128 and 156. Add 
motion tweening to frame 128. On frame 156, move the 
fish to the right hand side of the text. 


Make sure View>Snap is turned on. Go to 
frame 159 and drag the centre of the bubble to 
the bottom of the line. Do the same to frame 180 but 
place the bubble at the top of the line. Make sure it 
snaps to the end of the line. 


Insert a new layer called 'bubble1'. Use the 
Magnifier to zoom in and use the Oval tool to 


draw an empty circle with a white outline. Go to 
Modify>Group to group the circle. Insert>Convert to 
Symbol to add the symbol to the library. Call the 
symbol bubblie1. 


Add Motion Tweening to frame 159 but this 
time make sure the 'Snap to guide’ box is ticked 
so that the bubble follows the path. If you play the 
movie you will see the bubble float up. You can 
repeat this process and have multiple bubbles float 
up the screen. 


Exporting to the Web 


Finally we can put our masterpiece on the Web and impress visitors to our site... 


To keep the file size down go in to the Library 
and delete any unused symbols. To test the 
download times go to Control>Test Movie. Then go to 
View>Bandwidth Profiler. You can then see a chart of 
the download rates at any time. 
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oo Flash 4 has a new Publish menu to export the 

movie to the Web. Go to File>Publish Settings. 
Here are the settings for exporting the movie. Click on 
the HTML tag. Change the Dimensions menu to Percent. 
Type the width and height as 100%. Click Publish. 


Insert two keyframes on frames 159 and 180. 
Click Insert>Motion Guide and you will see a new 
layer appear above the bubble! layer called 'Guide: 
bubble1'. On the guide layer, use the Pencil tool to 
draw a wiggly line up to the water's surface. The 
bubble will float up along this path. 


The final thing this movie needs to do is send 
the user into the main Website. We need to go to 
main.htm once the movie has finished. Select the last 
keyframe of the movie and go to Modify>Frame. Select 
the Actions tab. From the pull-down menu select Get 
URL and type the address in the URL box. 


You should now find that you have a SWF file 
and an HTML file on your hard drive. If you open 
the HTML file in your browser, you will be able to see 
the Flash animation in all its glory, ready for you to 
show the world. EIS 
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HERE'S YOUR CHANCE TO GET YOUR HANDS ON MACROMEDIA'S MOST SOUGHT-AFTER CREATION TOOLS... 


or several years now Macromedia has led 
the way when it comes to design tools for 


get both products at once. We're lucky enough to be 
able to offer three Dreamweaver 3 Fireworks 3 Studio 


f 


The competition 


What does HTML stand for? 
hand tuned multimedia lingo 
hyper-text markup language 
here's to more lager 


To enter 


If you have Web access, you can 
do it the easy way... 

1) Insert the Computer Arts 
Specials CD. 

2) On the Contents screen click 
Current Compo. 

3) Put 'DW3/FW3 Studio Compo’ 


prizes worth £1000 


Internet professionals. As we go to press, 
the company is taking another massive 
step forward with the release of Dreamweaver 3, 
Fireworks 3 and a special Studio pack in which you 


as the competition name, and fill 
in the rest of the form. 
4) Click Submit Entry. 


If you'd rather enter by post, you 
can send a postcard with the 
correct answer and your name 
and address on it to DW3/FW3 
Studio Compo, Computer Arts 
Specials, 29 Monmouth Street, 
Bath, BA1 2DL. Please include a 
daytime telephone number so we 
can contact you if you win, and 
tell us if you have a Mac or PC. 


packs (worth £299 plus VAT each), courtesy of 
Macromedia, to win in our competition. 

For Web designers around the world 
Dreamweaver has long been a tool of choice. The 


The rules 


Closing date for entries is 2 April 
2000. Employees of The Future 
Network and Macromedia 
Corporation, or any of their agents 
or families, may not enter. The 
editor's decision is final, no 
correspondence will be entered 
into and there are no cash 
alternatives. One entry per reader. 
No purchase necessary. Please 
indicate on your entry if you do not 
wish to be contacted by any of the 
companies about related offers. 


latest edition adds to the software's refined array of 
powers by bringing features like Quick Tag Editing (for 
modifying your HTML on the fly) and new objects (so 
you can add jump menus, special characters, dates, 
e-mail and so on with ease). The program can take 
files from Word and tidy them up into HTML, and also 
enables you to import tables from spreadsheets or 
databases without messing up the formats. 

A History panel speeds up your workflow by 
enabling you to undo mistakes at any stage. Menus 
and shortcuts can now be customised as XML files, 
while at the server end of things the new Round Trip 
Server Markup feature has expanded tag models to 
include ASP, JSP, CFML and PHP. What's more, 
there's great integration with Fireworks 3... 

Fireworks 3 in itself offers you great control over 
your Web graphics. Now you'll be able to preview your 
roll-overs in action, and copy paths for pasting your 
creations into an array of other graphics applications 
including Flash and Photoshop. Fonts can be 
previewed, a History panel is available for the 
ultimate undo power and there are tools for fast 
button and symbol design... EEE 


(inc VAT) 
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[rut Gamer's readers are so impressed with the quality of this free weekly 
email games magazine, they've set up their own dedicated clan. 
However, you might just want to read the magazine. 


www.futuregamercom } 
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WITH BANDWIDTH SPEEDS EXPECTED TO RAMP UP IN 2000, THE WEB IS 
ABOUT TO GO 3D. WE TAKE A LOOK AT THE VISIONS OF THE FUTURE... 


verywhere you click on the Web, you can 
enjoy 2D animation, listen to CD-quality 
music or watch a variety of streaming video 
formats that are edging ever closer to 
perfection. But 3D is only just beginning to make the 
mainstream transition to the Web. 

3D technology actually thrives on the Web, from 
simple inline objects in Web pages to fully interactive 
multi-user environments that require their own client 
program. But a dominant protocol for creating and 
delivering 3D has yet to emerge. What the 3D-design 
community needs is something that captures the 
hearts and minds of users in the same way as 


@ 


Shockwave. Although there's nothing in that league 
yet, there are several contenders, any one of which 
could emerge as the dominant format when cable 
modems and ADSL make bandwidth less of an issue. 


VRML 


Of all the formats currently chasing the crown, Virtual 
Reality Mark-Up Language is the most established 
and widely used. The easiest way to describe VRML is 
as a 3D relative of HTML. Like HTML, VRML is a 
scripting language aimed specifically at laying out 
hyperlinked content on the Web, except that the > 
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Superscape 3D Webmaster is more than a 3D authoring package - use it to create fully 
interactive worlds complete with animation and ‘intelligent’ movement for the Web. 
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pages it produces contain 3D objects. 
The problem with this description is 
that although it's close to the truth, the 
3D part makes VRML difficult to code 
by hand. A typical VRML script contains 
descriptions for every component of an 
object in a scene, including its size and 
position in three dimensions, lighting, 
material and texture mapping 
properties. A scripting language like 
this can generate documents much 
larger than HTML all too quickly. 

VRML has longevity on its side. 
The first specification was released in 
October of 1994 by Gavin Bell — 


www.3d-visuals.co.uk is home to a firm 
that creates visualisations for galleries. 


NASA is using MetaStream for models 
you can view from any angle in 3D. 


although by that time a browser 
capable of reading VRML Labyrinth had 
already been released. The latest 
version, VRML 97, is more complex 
than that initial effort, supporting 
animation and advanced interaction. In 
order to view VRML pages now you 
must have an appropriate plug-in, like 
Superscape's Viscape or Silicon 
Graphics’ Cosmo Player, installed in 
your browser. 

Because VRML is an open 
standard there are many authoring 
tools available, some of them in the 
public domain. A long-term supporter 
of the format has been Caligari, maker 
of the popular 3D environment and 
object designer TrueSpace, which 
features VRML scene creation from 
version 3. For first timers it's an easy 


If David Bowie can claim that there’s always been a cyberspace element to his music, 
then so can the equally Max Factor-friendly metallers Kiss, seen here in B3D form. 


introduction to both 3D design 
concepts and VRML, with a working 
environment that's quick to learn your 
way around. 

Finished 'worlds' can be previewed 
either in a Web browser or the bundled 
VRML browser. Caligari also publishes 
an odd little program called iSpace that 
allows you to create pages with a 3D 
look out of 3D objects. 


Superscape VR 


Although VRML is nowhere near as 
widely used as other Web formats, it's 
by no means a failure. It's easy to 
author using the tools that are 
available and the majority of 3D on the 
Web is VRML. On the other hand, you 
can't say that it's exactly set the world 
alight either. Some of its problems may 
be, paradoxically, in its strengths. The 
language was built to be robust but 
highly optimised, which means that 
many of the bells and whistles that 
modern users are used to from 3D 
games are missing. There's also a 
possibility that VRML resembles its 
cousin HTML a little too closely. 

Downloading files can be a lengthy 
process as the core script forascene . 
may make calls to many auxiliary files 
like sounds, textures and even 
external models. This can be a long 
time to wait if the results don't look or 
behave much better than the kind of 
thing you used to run on a 486 under 
Windows 3.1. 

Now that the initial flurry of 
interest in VRML has died down, 
developers are turning to their own 
formats in an attempt to put quality 3D 
on to the Web. One of the clear leaders 
in the creation of tools for making 3D 
environments on the Web is 
Superscape. Currently the company 
markets two tools for building 3D 
worlds, Do3D aimed at consumers and 
3D Webmaster for more advanced 
users. While both are capable of 
producing VRML worlds, they can also 
output to the proprietary 
SuperscapeVR (.svr) format, which 
Web browsers can read with the 
Viscape plug-in. 

SVR is a compact format for 
delivering 3D worlds to the Web, but 
the superficial similarities with VRML 
end there. Because it's been 
developed within a commercial 
environment, the SVR protocol and the 
Viscape viewer have been able to keep 
up with and incorporate advancements 
in 3D hardware technology as they've 
come on the scene. SVR supports 
direct hardware calls to make 
transparency, fogging, bump mapping, 


texture mapping and polygon shifting 
much more efficient than the VRML 
‘design by committee’ approach could 
ever be. With aggressive compression, 
file sizes are comparable to the older 
standard and play more efficiently 
even without acceleration. 

3D Webmaster further benefits 
from the company's years of 
experience in the VR field with support 
for the powerful Superscape Control 
Language (SCL). Using SCL it's 
possible to program just about any 
kind of interactivity you can think of at 
either a global level (applying 
conditions to the entire 'world’) or at 
local level (affecting individual 
objects). Though definitely not for the 
faint hearted, SCL's logical and 
familiar structure makes it fairly easy 
for those with a programming 
background to pick up, and it's a 
definite improvement on VRML's 
limited interaction scripting. 


B3D 


The Superscape SVR format may be at 
the head of the pack when it comes to 
3D worlds on the Web, but other 
companies are beginning to catch up 
and squeeze into the niches that it 
leaves untouched. While SVR is fast 
and looks much better than VRML, it 
still has some way to go before it can 
beat the kind of 3D you see in modern 
computer games. 

For dedicated 3D designers who 
are used to their own tools it also 
means having to learn new software 
and get used to the limited 
functionality of that software. One 
company with a promising solution is 
Brilliant Digital with its B3D Max plug-in 
for 3D Studio MAX and the B3D Studio 
standalone editor. 

B3D Max is the more interesting of 
the two, supporting a large sub-set of 
3DS MAX features. These include 
morphing, standard and multi-sub 
material types, target views, several 
lighting types, progressive transparency, 
reflection mapping and fog. Animation 
capabilities are catered for with the 
inclusion of many standard controller 
types. B3D files can be exported from 
3DS MAX in either self-contained or 
Internet streaming versions — both 
flavours are compact compared to 
either standard 3DS files or video 
formats though large when set head to 
head against Superscape VR. 

They can be played back on 
Windows platforms using Brilliant 
Digital's Digital Projector plug-in for 
Web browsers. Although B3D 
animations lack the interactive 


MetaStream 


Could Metacreations hold the winning hand? 


Th shock announcement that 
Metacreations is to concentrate 
all its efforts on e-commerce is easier 
to digest once you take a look at the 
product it plans to do it with. 
MetaStream is different to the other 
protocols in this line-up. While the 
others concentrate on the creation of 
worlds or 3D movies, MetaStream has 
been put to best use for distributing 
and viewing 3D objects on the Web. The 
technology is built into several 
Metacreations authoring products, 
including Canoma (the package that 
helps you create 3D scenes from 2D 
images) and the new 3D modelling 
program Carrara. 

Third parties can license the 
technology for free, to incorporate as 


MetaStream's fast downloading 3D 
objects have proven ideal for use in 
on-line catalogues. Warner Bros, Sony 
and Lego are all customers. 
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an export option in their own products 
or as an integral part of applications. 
Microsoft is one of the high profile 
early adopters. Developed by 
MetaCreations and Computer 
Associates alongside Intel, MetaStream 
is unique as far as 3D file formats go in 
that it's scalable according to the 
platform it's viewed on. That is to say, 
no matter what connection speed 
viewers have, or type of hardware 
configuration they're using, 
MetaStream objects download quickly 
and can be manipulated in real time. 
As a MetaStream file downloads 
an internal algorithm decides the 
optimum resolution to present to the 
viewer and scales down the number of 
vertices in the original file to 
compensate. With companies like Sony 
and Lego eager to display models of 
their products on-line, the technology 
has already proved to be a winner in 
shopping and catalogue applications. 
If the same scaleability and quality 
could be applied to on-line worlds, 
MetaStream could wipe the board. 


Glick on a product to the left to view in 30. 
You'll find more 30 images throughout 
Somy Xtras Direct 


The plug-in allows you to fine tune the 
display of objects, choosing from a 
range of 3D and resolution options 
from a context sensitive menu. 


“The results of B3D are every bit as 

good as the cut scenes you see in 3D 
computer games, if not better. The ideal 
format would be a combination of B3D and 
SVR, and it might not be a long wait” 


capabilities of SVR, the results are 
every bit as good as the cut scenes 
you see in 3D computer games, if not 
better. The ideal format would be a 
combination of the two, and with a 
bandwidth explosion just around the 
corner, it might not be a long wait. 


— 


For more information about 3D on the Web, visit 
W www.superscape.com, W www.sgi.com, 

W www.caligari.com, W www.bde3d.com/ev 
and W www.metastream.com 


AY 


Shared worlds like www.activeworlds.com 
are tipped to be the future of the Web. 


=> 
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Putting B3D on your site 


Using Brilliant Digital's B3D technology is easy. Here are nine quick steps to take you through the process of modelling and 
viewing your B3D animation. You'll need a copy of 3D Studio MAX, and the trial version of the B3D plug-in on our CD... 


-— 


Using B3D Max 
to create optimized 
Internet animation 


o. Installation is easy, the set-up program installs 
two B3D Max plug-ins into the 3DS MAX plug-ins 
directory. The main B3D Max plug-in is found in the 
Utility panel within MAX. The BDESkin plug-in is a 
skinning add-on used to bone single skin characters - 
it's found in the Object Modifiers panel. 


Co. Add the BDESkin modifier to the deformable 
objects. Hit Assign Bones. Default weighting is 
added to each vertex. Select Deform in Viewport. Turn 
on the Animate button and go to frame one. Test your 
mesh by moving the bones. Choose sub-object level to 
refine the vertex assignment. 


ia | \BDE_Tools\MyMovie\Build\MYMOVIE, bad Browse... | ; 
ep oo hear ae Z a air « 
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o. Hit Export to open the build window. Depending 
on delivery, a B3D can be Self-contained (easy to 
e-mail) or Internet Streaming (for streaming from a 
Website). Bandwidth sets the amount of data in the 
stream - use 4000 bytes/sec for a 56.6k modem or 
2200 bytes/sec for a 28.8k. Set Camera Control to Full 
Control to allow users to move around the scene or 
None to prevent them. 
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Lower polygon counts are better for real-time 

3D so keep models optimized. B3D Max supports 
models as editable meshes, morph objects or 
deformable meshes using BDESkin. Only one BDESkin 
modifier per scene, so attach deformable objects 
together. Bones can be built from standard geometry. 
Morph targets for facial animation must be switched to 
cubic controllers. 
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Co. Bone objects can be linked to a Biped skeleton 
or Max IK system for animating. Create only one 
Target Camera per MAX file. Light your scene by using 
Directional and Omni lights. Fog can be added in the 
Environment panel. Fog distances are read from 


Camera Environment ranges. Lighting and fog colour 
are animatable. 


Sound Compression 
None 


1 cet ne 


© Vowware 
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CG. Choose Sound and Image compression to suit 
the delivery medium. Set sound compression to 
11k for a 28.8k modem, 22k for 56.6k modem or 22k 
Stereo for CD-ROM distribution. Image compression 
should be set to JPEG for Internet playback or PKzip 
compression for CD-ROM playback. 


6. Apply 8- or 24-bit BMP textures using the 
material editor. B3D Max supports multi-sub and 
standard material types. Diffuse, opacity and 
reflection maps can be used. Textures can be self- 
illuminated and two-sided. For mapping, all UVW 
modifiers are supported, even UVWunwrap. To tile 
textures use the option in the UV modifier stack. 
Collapse the modifier stack. 


| _—_ BD Exped 
|, Aspect Ratio 


Aspect ]1.333333 


Select B3D from the Utility 
panel. Animation Compression 
determines output filesize versus 
animation precision. Texture 
Correction stops texture skewing. 

_| Background draws an object behind 
| everything regardless of position. 
Sprite objects are useful to making 
2D trees. Object properties can be 

added to individual objects using 
Apply to Selection. 


oC. To play a B3D file simply double click the file to 
launch the Digital Projector and play it. See 
www.b3d.com for documentation on streaming B3D 
files over the Internet. EI 
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DESIGNING SHOCKWAVE GAMES IN DIRECTOR CAN ADD THRILLS AND 
SPILLS TO YOUR SITE AND KEEP PEOPLE COMING BACK FOR MORE... 


nformation and e-commerce are two good 
reasons to have a Website, but one way to 
keep people coming back to your site is to 
! entertain them well while they're there. 
Music, video and Webcam feeds are some of the 
options, but a surefire way of holding a visitor's 
attention is to get them playing a game at the site. 
There seem to be two general approaches to the 
design of Web games. One is to base a game on an 
arcade classic like Frogger or Space Invaders — at 
least here you have a template to work from. The 
other is to design a game based around the products 
or brands of the company you're designing the site 


for. At www.wotsits.co.uk you'll see examples of both. 
One of the most useful tools for designing Webgames 
is Director 7, which has proved itself as a multimedia 
design tool. We've got a demo version on our CD for 
you to use as you follow this Webgame tutorial. 

We'll be designing a simple Space Invaders-style 
game. Although there is much scripting involved, once 
you've played around with it you should see that there 
are many possibilities to change and improve it to 
create your own game for the Net. 


———————— 


Director 7 costs £1110, and is available from Computers Unlimited 
on € 020 8358 5857 or W www.macromedia.com 


Stage One: Spites and the background 


First we’ll create our alien raiders... 


eS Stage Size: (640x802) a - {we | 
| usetaeoion (GEE —H] ww] [er] 
| oe 
| Color Selection: @ ROB (Palette Index 
| petauit Palette: 


| Options: [] Remap Patetres When Weeded 
} [Maintain Outdaved Ink Mode Limitations 
720 |Seore Channets 


| Stage Cotor: 


Gave Font Mab | |_Lood Font Mahe Hel 


oe. Firstly adjust the colour of your 
stage (Modify>Movie>Properties) 
to sky blue (#0099FF) and change the - 
stage size to 480x320. This size stage 
gives a smaller end movie size, which is 
ultimately needed for fast access on 
the Net. 
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Next open the Vector Window 

(Window>Vector shape) to create 
your sprites. For the fiendish aliens 
you'll need to build three different 
types with two variants of each. This is 
to give the effect of movement as the 
aliens move from left to right. You'll 
also need to design a space ship, bullet 
and an explosion. 


The text for the movie is 

created in Director (Window> 
Text). Write text for the start of the 
movie, if you want to change the font, 
size or colour, go to modify font and 
change settings, check that you have 
highlighted the text before you do this. 
To create the text for the end of the 
game just repeat the process. 


Stage Two: Setting up the sprites on the stage 


Next we’ll set the stage for the aliens to invade... 


Shage Selection: @ Entire Sprite 
QCorrent Frame Only 


Span Defoutts: (Display Sprite Frames 
Btwe 


O Width of Score Window 
(BTerminate oF Markers 


Co. Set the span duration to 5 
(File>Preferences>Sprite), this 


will make it easier to view on the score. 


Code red 


Just in case you 
get confused... 


> Red font indicates code 


> Normal font is for anotations 
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Co. You have to place the sprites on 
the stage. Drag the start text onto 
the score and into channel one holding 
down Alt/Apple (Ctri/Alt). This will set 
the duration to 1. Next drag the score 
field into channel 2, ship vector to 
channel 5, 3 bullet vectors to channels 
6 to 8, alien 1 from channels 10 to 22, 
alien 2 from 23 to 30 and alien 3 from 
31 to 38, further bullet vectors from 40 
to 60 and the final text to channel 61 
and 5 on the timeline holding down Alt 
or Apple. This basically sets up all the 
sprites for the game. 
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Finally you need to create a 
score text to register how many 
aliens you have shot (Window/Text). 


ore 
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The sprites will pile up ona 
central position on the stage. Drag 
them to your desired positions with 
aliens across the top of the screen and 
ship stationed on the base line. 


Next open the tool pallet and 
select the box tool and drag this 
across the aliens starting at the top and 
dragging down to the top of the ship, 
repeat this for the spaceship and 
change both inks to background 
transparent through the score. 


Stage Three: Setting up the movie script 


This script registers the aliens hit into the score field text 


global gScore 


on startMovie 
gScore =0 
showScore 

go to frame "Play" 


end 


on showScore 
member("Score").text = "Score" &&gScore 
end 


GETS] (20s) OES (2) 
Global gScore 


on storttiovie 
gSeore = 0 
showscore | 
go to fre 
set the Senetrsint of sprite S to sprite 58 
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Stage Four: Setting up the score scripts 


Firstly create three markers and name them ‘start, ‘play’ and ‘dead’ in the scores 
marker channel. Place the "start" marker at 1, "play" at 2 and "dead" at 5. In the 


script channel under the start marker double click and this will bring up ascript 


window. Type in... 


global gsides, gbase, gScore 
on enterFrame me 


if gsides then 
sendAllSprites(#changeDirection) 


else if gbase then 

go to frame "dead" 

end if 

gsides = FALSE 

end 

on exitFrame 

go to the frame 
Normusr @eeee 
endif 

end 

Under the play marker 

global gHitWall, gHitBottom 

on enterFrame me 

if gHitWall then 
sendAllSprites(#changeDirection) 


else if gHitBottom then 
go to frame "Done" 


endif 
gHitWall = FALSE 
end 


onexitFrrame @ @ @ @ @ @ @ 


go to the frame 
end 


Under the dead marker 


on exitFrame 
go to the frame 


end @eeeeeeee 
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The initial stages of the score, including 
markers and sprite positions. 


This keeps the movie on frame1on 
exit frame, until the mouse is clicked. Then it moves 
to the marker ‘play’. If you shoot all the aliens the number 
in the score field text will rise. When all the aliens are 
shot then it will go to the marker ‘dead’ showing 
the end of the game. 


This changes the direction of the sprite as 
it hits either wall of the score, else if an invader 
gets to the bottom it goes to marker "dead". 


This section of code keeps the 
playhead at that position. 


Stage Five: Writing the behaviours 


In one tutorial it is impossible to show the ins and outs of Lingo and there are many 
ways you could program your ship and alien behaviour. This tutorial will show youa 
drag and drop example, although it will involve a lot of physical typing. The text files 
can be found on the CD in (dual>tutorial>director). To write the behaviours go to 
(Window>Inspectors>Behaviours) then create a new behaviour 


Ship behaviour 
property pfire 


on exitFrame me ; 
Sets the horizontal 
set the locH of spritestothemouseH @ @ @ @ @ OF@ movement of the space ship to the 
horizontal movement of the mouse. If 


if the mousedown and not pfire then the mouse is clicked then the 


sendSprite(sprite 6, #fire, sprite(me.spriteNum).loc) 
pfire = TRUE ® 
else 

pfire = FALSE 

endif 

end 


Ship's bullet behaviour 


< web game Bi web special > 


Director comes with loads of built-in 
behaviours which you can add to, or write your 
own through the inspector. 


If the command has been 


global gScore 


given to fire then this behaviour 


property pMode sets the root from the 
mouse down. 


on beginSprite me 
pMode = #none 
end 


on fire me, loc 


ifpMode=#firethen @@@@@@G888 0108888888880 888 8 @ 


sendSprite(sprite(me.spriteNum-1),ilma laa) 
else 


sprite(me.spriteNum).loc = loc 

pMode = #fire 

endif 

end 

on exitFrame me 

if the framelabel <> "Play"thenexit @ @ @ @ @ O70 Will not fire if the play head is not 
if pMode = #fire then on the play marker. 


sprite(me.spriteNum).locV = sprite(me.spriteNum).locV - 16 
if sprite(me.spriteNum).locV < o then 


pMode = #none 


Gets command to fire. 


else The bullet's vertical path is set. 
acca if the bullet hits the top of 

one the screen then it 

endif becomes nothing. 


end 


on didIHit me 


epeat with i = 25 to 
Mi '=250053 @@@ 00000 © O10 Checks if the bullet has hit an alien 
if sprite i intersects me.spriteNum then looks through all alien sprites. 


sendSprite(sprite i, #hit) 


sprite(me.spriteNum).locV=-100 @ @ @ @ @ @ O10 @ @ OO @ 
pMode = #none 


Sac sel peal @ee2@e@@02080808080010 © @ @ If the bullet sprite enters an 
endif alien sprite then it is hit, and will 
end repeat add a point to the score. 
end 


If the alien is hit, the 
bullet disappears. 
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Stage Six: Setting alien behaviour 


Now you've set the ‘good behaviour' of your player's ship, it's time to create some 
bad behaviour for the space invaders. Returning to Director code, here's how... 


In the behaviour inspector window you can 
choose new behaviours and then click the 
script window, for a dragable alien behaviour. 


global gsides, gbase 


on beginSprite me 
pDirection=2 @ 


pMemNum = sprite(me.spriteNum).memberNum 


end 

on exitFrame me 

if the frameLabel <> "Play" then exit ® 
if pDirection = o then 
sprite(me.spriteNum).memberNum =o 


else 


sprite(me.spriteNum).locH = sprite(me.spriteNum).locH + poirggt®r 


if pDirection > o and sprite(me.spriteNum).locH > 460 then @ 


gsides = TRUE 


else if pDirection < o and sprite(me.spriteNum).locH < 20 then 


gsides = TRUE 
end if 


if sprite(me.spriteNum).memberNum = pMemNum then 
sprite(me.spriteNum).memberNum = pMemNum +1 


else 
sprieagne.spriteNum)-memberia =pMemNum 
endif 


if random(200) =1then 


sendSprite(sprite 55, #fire, sprite(me.spriteNum).loc) @ 


end if 
end if 
end 


on changeDirection me 


sprite(me.spriteNum).locV = sprite(me.spriteNum).locV + abs(pDirection) 
if sprite(me.spriteNum).locV > sprite(s).rect.top then gHitBottom = TRUE 


pDirection = -pDirection 
end 


on hit me 


sprite(me.spriteNum).member = member("bang") eeeeeo 


updateStage 


pDirection =o 
end 
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Starts movement length 
and direction. 


If the playhead is not on the 
play frame then the sprites will 
not move. 


Ifa sprite is not 
moving then it has been hit, this 
allows the aliens to move to the 
constraints of the stage. 


On movement the 
alien member will change to the 
cast member next to it in the cast 
and back, this enables the look of 
waving legs etc. 


The random setsthe 
bullet sprite which although the same 
cast member to the spaceship bullet is 
a different sprite number due to its 
positioning on the score. 


Every time a sprite hits 
the wall then the sprites will 
move closer to the base. 


Ifthe ship’s bullet hits 
the alien then the alien sprite is 
changed to the explosion, and the 
direction is set to zero. 


Setting up the aliens' bullets: 
property pMode 
on beginSprite me 
PMode = #none 
end 


on fire me, loc 
if pMode = #fire then 


sendSprite(spritetme.spritehan+1),#wve,Joc) 
else 


sprite(me.spriteNum).loc = loc 
pial = tire 

endif 

end 


on exitFrame me 


if pMode = #fire then 


pine de ie -locV = 
sprite(me.spriteNum).locV +20 
if sprite(me.spriteNum).locV > 320 then 


PMode = #none 
else 


didIHit(me) 

endif 

endif 

end 

on didlHit me 

if sprite 5 intersects me.spriteNum then 


sprite(5).member = member("bang") 
updateStage 
@e° 


gotoframe"Dead"@ @ 
endif 
end 


Moveable aliens 


These aliens have a drag and drop behaviour 


that comes with Director simply select 


(Windows>Libary pallet) and drag and drop 
the random movement and rotation, then 
select your settings. The behaviour will appear 
in your cast. If you want to add to this to keep 
the sprites still when you start the movie, 

you will have to adda line of code from the 
other invader behaviour. Set the constraint of 


your ship: 


on exitframe 


set the constraint of sprite ntosprite78 @ 


end 
Getting rid of the cursor: 
on mouseWithin me 


cursor 200 


end ©®@@OOOOOCO8C®@ 


At the end of the game you want this reversed 


so you have to change the cursor to: 
on mouseWithin me 
cursor 280 


end 


if the frameLabel<>"Play"thenexit @ @ @ @1@ @ ¢ 


ee 


@2eeeee Tells the bullet whether 


it is firing already... 


if not then passes it 
along to the next sprite. 


This code is similar to the 
spaceship's behaviour but structured slightly 
differently. If an invader's bullet hits the ship 
sprite it's game over. 


Sets the constraint on the ship sprite 
to the box sprite that you drew around 
the ship. This will stop the ship disappearing 
of the edge of your stage. 


This sets the cursor to blank so the player 
can no longer see it. 
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Stage Seven: Behaviours to sprites 


You can save time and effort writing a script for each 
sprite by writing a behaviour and dragging and 
pide it on each sprite 


To use these behaviours you need to drag them from the cast onto the relevant 
sprite on the stage. 


Stage Eight: Shocking your movie 


If you want to transfer your movie to the Net it needs a 
small file size. This can be done by ‘Shocking’ your movie 


Mac HD 
i> Mac HD Eject 
SB PcsERV.MAGS nae 
03 *ExPosuRE ISSUE #1 Desktop 
fe) 44 Gist 
OY amapi modets 


Save Shockwave Movie as: 


Di Generate HIML 
OPreview in Browser 


operty | 


cs Taser’ 


Pi 


Save your movie as usual (File>Save) then save it again as a Shockwave 
movie. This will compact your movie right down to about 16K. This has been 
achieved by using simple vector graphics. Although it is possible with previous 
versions, Director 7 allows you to use colour through the use of vectors to 
keep your file size small. Check the finished game out on our Website at 

W www.computerarts.co.uk, in the fun stuff section. 
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Computer Arts Digital Video 
Special —- COSB0004 

The revolution is here! From the 
inspiration to the premiere, 
everything you need to know 
about desktop film-making for 
broadcast, multimedia and the 
Web. Master the basics of Adobe 
Premiere, add dazzling special 
effects and discover the benefits 
of paint* and effect*. 

CD 30-day full software: Premiere 
5, After Effects 4, Commotion 2, 
paint*2, effect* 2, Media Cleaner 
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Computer Arts Photoshop 
Special — COSB0005 

It's 100 per cent Photoshop! 
Don’t miss 28 new tutorials and 
skills, and our ultimate guide to 
plug-ins. Plus 17 great text 
effects to bring your type to life, 
and 101 hints and tips to make 
you a smarter Photoshopper. And 
create the sharpest Websites with 
ImageReady 2. 

CD KPT Equalizer—a brand new 
full plug-in from Metacreations 
that’s not available anywhere else 
in Europe (dual). Plus 23 plug-in 
demos, and free pics worth 
£1290 from Stockbyte. 
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Computer Arts Photoshop 
Special - COSB0006 

Be inspired by our latest 3D 
special. Our modelling section will 
improve your skills with tutorials 
on the creation of Bullfrog's Dark 
Mistress, a monster shark and an 
alien insect. Meet the makers of 
Walking With Dinosaurs, and visit 
Europe's largest motion capture 
studio at Audio Motion. Plus 63 
tips on lighting and rendering. 

CD trueSpace 3/SE — a full 3D 
application (PC only), plus 10 DXF 
meshes from Viewpoint Digital, 
15 textures from Picture Garden. 
Seven demos and showreels. 
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Photoshop 5.5 techniques, realistic 
3D design, Painter 6 review. CD 
Photoshop 5.5, vector plug-in demos 


Issue 40 — Code CA040 

DV effects techniques, font types 
explained, eight inkjets reviewed. 
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Dreamweaver 3 tutorial, Smoke & 
Mirrors profiled, Maya 2.5 reviewed. 
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Blueberry.net designers still use 
pen and ink to develop projects 
like the Howletts Zoo site. 
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It's not your average Web design 
house, Says director Sam Stonier. 
“|t is disruptive — corporate 
people aren't going to get 
along here...” 
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ust five years ago, the Web was a barren, inhospitable 
place. It was grey, it was slow, and what few graphics 
existed were pretty dull and uninspiring. 

j It was fertile ground, however, for a design company 
with the imagination and flair to push back the boundaries of 
cyberspace and set the standards of Web design that we now 
take for granted. That company was Blueberry.net, now one of 
the UK's biggest Web design agencies, boasting an impressive 
rollcall of clients. 

The firm was founded as a design and marketing company 
over ten years ago, explains director Sam Stonier. "We started 
in traditional design, moved into new media, now we've focused 
on Websites, specifically e-commerce sites." 

Blueberry's first sortie into Web design in 1994 was headed 
by founder Russ Sellers, resulting in an entertainment site 
called The Hill, which, admits Sam, was considered something 
of an eccentricity at the time. "It was just him, a programmer 
and a designer." Now Blueberry.net employs over 100 people. 

It's fair to say, however, that its roots in traditional design 
have given Blueberry.net an edge over its rivals since. "That's 
one of the things that sets us apart," says senior designer 
Angus Mackinnon. "From a design point of view we're always 
trying to make things as rich as possible." 

Designers at Blueberry's Chelsea Harbour base are still 
encouraged to draw up their ideas with paper and ink, a 
technique which helped Angus design game site Dingbats and 
the CNN Traveller site. He comes from a fine art background, 
having studied at the Ruskin School of Art at Oxford, bringing a 
fresh perspective to the process. 

"| got into Web design through painting for Blueberry — all 
the paintings round the office are mine," he says. "I stayed in 
touch and got a job here. It was completely opposite to anything 


(Clockwise) Just a 
few of the many 
varied site created 
by Blueberry.net, 
including on-line 
bookmaker Blue 
Square, fashion 
label Ted Baker 
and the Dingbats 
game site. 


I'd been used to — from complete freedom of expression to rules 
and regulations." 

Another inspiration for Angus is television, giving the 
Dingbats site a game show feel. "It doesn't have any text, it's all 
voiceover, it's very intuitive, there are no banner ads, there are 
actually animated adverts, so that kind of looking at things from 
the outside, at how you can disrupt conventions, | think my fine 
art background helps me with, even if it's not actually applying 
fine art principles." 

One of Blueberry.net's most recent projects has been a site 
for fashion house Ted Baker, which presented a real test, says 
Sam Stonier. "They didn't have much of an identity — they're 
‘fashion's best-kept secret’, so there was a lot of work for us to 
take a brand name and give it a face, that was challenging." One 
look at the site, with its use of Flash, elegant graphics and 360° 
views of Ted Baker clothes suggests they succeeded. Blueberry 
designers make great use of Flash, enjoying the freedom it 
gives, bringing sound, animation and 3D into the Web equation. 

In a similar vein, Angus has designed a site for on-line 
bookmakers Blue Square based on nothing more than an 
existing logo. It's this kind of ultracreative approach that has 
brought some of Britain's top companies to Blueberry's door. 

"We don't target people, we only turn out quality Websites, 
and that leads to companies seeking us out," explains Stonier. 
"They'll come, sometimes with a brief, sometimes not with a 
brief, so once we've determined what the site's going to be, a 
designer will go off and come back with three or five designs." 

So what of the future, with all its talk of convergence of 
information media? "We're on the leading edge rather than the 
bleeding edge," reckons Sam Stonier, "We're just starting to do 
our first interactive TV and WAP phones." 

To help maintain Blueberry.net's success, Angus Mackinnon 
says they want people who can think differently. Originality is a 
prized commodity. "We get a lot of people who get into Flash and 
come along with cutesy Japanese-style graphics. There's a very 
trendy style people can adopt easily. We look for people who can 
see beyond that." 

"It is disruptive," adds Sam Stonier. "Corporate people 
won't get along here — anyone can have a good idea, people 
aren't restricted or stifled. There's so much opportunity." EEE 


Contact Blueberry.net on t 020 7351 3313, € info@blueberry.net, or visit 
W www.blueberry.net for links to sites featured on this page. 
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Lights, camera, action cet awebcam on-line... 


| 1 ieee years, Webcams have become one of the 
most popular and imaginative uses of on-line 
technology. Blueberry.net has incorporated Webcams 
into its Web site for Howletts Wild Animal Park, where 
you can control the cameras, zooming in and panning 
around to watch the zoo's tigers, elephants and 
gorillas. Blueberry's Jolyon Hogarth-Scott explains the 
Webcam essentials... 

“Webcams you can pan, tilt, zoom and control in 
real-time can really only be easily achieved on a Power 
Macintosh. There are other solutions but they just 
don't offer the same level of client side interactivity 
and real-time streaming. 

“The lowest specification for the machine would 
be an old 7600 with the built-in Apple Video digitizer. 
Otherwise a G3 or G4 will do very nicely; the server will 
require a video capture card for each camera attached 
to it, the Aurora Fuse and the Miro DC30 are both very 
effective but you can't use two of the same type in the 
same machine and there are sometimes 
incompatibilities with cards. So for simplicity we'll 
talk about one machine with one camera attached. 

“The maker's software is from Rearden 
Wwww.rearden.com — for around $2000 it bundles 
the software (SiteZap and SiteCam) and a Sony EV1-D31 
controllable camera. SiteZap is used to control the 
camera (via AppleScript, which is why it will only work 
ona Mac) and SiteCam is used to send the images. 

“SiteCam also has a dedicated Server built into it, 
but Starnine's Webstar can also be used (as it has been 
at Howletts). These Webcams work on the principle of 
server push, which was a function built into Netscape 
2and above (oddly enough IE for the Mac supports 
server push yet IE for the PC doesn't); for PCs they use a 
Java applet which acts rather similar to a very fast 
meta-refresh. 

“One thing you need to bear in mind is photo 
quality and size, due to these limitations much has to 
be worked around this factor.” 

You can see Blueberry’s Webcam in action, live on 
the Howletts Wild Animal Park Website at 
whttp://howletts.net, and take a look at what the 
gorillas, elephants and tigers are up to. 


Sitecam is the application used to send 
the images from the Webcam. 


File size is important - the smaller the file 
the more updates per second. 


1211 pmGME 


And here’s the star of the show, tucking 
into a banana on your computer screen. 
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GoLive 4.0 
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ADOBE GOLIVE 4.0 BOASTS DRAG AND DROP AUTHORING FEATURES 
THAT'LL HAVE YOU BUILDING YOUR OWN SITE IN NEXT TO NO TIME... 


Ithough Adobe was one of the first big 
software developers to release a drag and 

drop Web authoring package in the shape 

of Pagemill, it didn't offer a real 

contender until the release of GoLive 4.0. GoLive was 
the main prize for Adobe when it acquired GoLive 
Systems last year. It immediately set about updating 
and producing a PC version of the highly acclaimed 
Macintosh Web authoring tool. 

The Adobe versions of GoLive for Mac and PC 
incorporate cutting edge features. Some aspects that 
took advantage of Mac specific behaviour — the way 
that folders open when you hover content over them, 


a 


for example — have been translated to the PC version. 
Fans of Dreamweaver's handling of DHTML and 
timeline based operations won't be disappointed 
either, as GoLive couples these with more aggressive 
site verification tools than Macromedia's offering. 

Over the next few pages we'll show how to get 
your own GoLive 4.0 authored site up and running in 
no time. You can see the finished version of our site 
on the cover CD in the Tutorials folder, along with all 
the resources you need to create it. 


For more information about GoLive 4.0, visit W www.adobe.co.uk, 
t 020 8606 4000. The full version costs £210. 
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Stage One: Getting started 


Laying the foundations for our Website 


With the Site Window active, find the ‘images’ Double click on index.html to edit the file. Click 


GoLive 4.0 includes site creation and folder that accompanies this tutorial on the cover on the Page icon on the active window to edit 
management tools, so we'll take advantage of CD and drag and drop it into GoLive's Site Window. It Page properties in the Inspector. To change the colour 
those to make a quick start. Go to File>New Site> may also be handy to make a resources folder to store properties of individual elements tick the box 
Blank and enter a title for the site - preferably alllower work in progress here. In the top pane of the Site alongside, then double click in the colour well. Drag 
case and without spaces. Browse to a suitable place on Window, select your site folder then click the new and drop colour from the colour picker to the small well 
your hard drive to create the site. folder icon. Rename it 'resources'. next to the element. 


Go to the Site Extras tab in the palette. If 


Go to File>Save to save index.html. Switch to Stationeries isn't already showing, select it from 
CG. You can also enter colour codes manually. In the Site Window and click the arrow at the the drop down menu in the bottom right corner of the 
the case of our site, the background colour must bottom of the window so you see the Extras tab. Palette. You should see a page icon; this is the 
be #FFDOO0 so that the images anti-alias with the Ctri-click (or Option-click on the Mac) on index.html in ‘newpage' stationery you just created. Click and drag 
background. Don't bother giving the page a title yet as the Site Window and drag a copy to the Stationeries the icon to the main part of the Site Window to make a 
we're going to use this as stationery; the GoLive folder in Extras. In Stationeries, click on the file you've | new page, then repeat. Name your two new pages 


equivalent of a template. just copied and rename it newpage.html. navbar.html and main.html respectively. 


Stage Two: Frames-based layout 


Now we’ll determine how our site’s going to look 


Click on the vertical divider in the frames 


The next step is to make a frames-based layout to switch the Inspector to Frame Set With the 'main' frame still selected, find the 
layout. In the document window containing mode. Set Border Frame to No and Border Size to 0. Point and Shoot icon in the Inspector (it has a 
index.html, click on the Frames View tab. Go to the Click inside the left-hand frame to edit its properties in _ spiral on it) and click and drag it to the Site Window. A 
Palette and click the Frames tab. Click and drag the the Inspector. Give it the name 'navbar', set its widthto _'line' is drawn from the Inspector to the site window. 
frame configuration that is made up of two columns 150 pixels and set scrolling to No. Click in the larger Drop the line on main.html to make this document the 


only to the document. A frames-based layout appears. frame on the right and give it the name 'main'. contents of the main frame. 
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Stage Three: Laying out pages 


Next we'll start creating the content that will make up our site 


a8 
bs ed 


Co. Click on the Basic tab in the Palette, click and 
Close all open windows except the Site drag the New Image icon to the open Document With the mouse button still depressed, open 
Window, then double click on the file main.html to | Window. With the Image active, click the Point and the Images folder by hovering the line over it, 


open it. You will see a blank page with the same page Shoot icon and drag to the Site Window. You only need then let go of the mouse button when you've chosen 
properties as the original index.html before you to be able to see the edge of the Site Window as it logo.gif. Although this is a very Mac-like method of 
started messing about with it, as it was created from comes to the top once you drag near it using Point navigating through folders, it works in the Windows 
the stationery we made earlier. and Shoot. version of GoLive 4.0 just as well. 


mm a\vis 
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With the image selected, click on the Centre CG. In the Inspector, set the width of the Layout CG. Click and drag a Text Layout Box from the 
formatting icon on the toolbar, then click Grid to about 450 pixels. You can also change the Basic Palette to the Layout Grid in your 
elsewhere on the page to deselect the image and press __ size of the grid squares. Place a new image inthe document. Click and drag on the box handles to 
Return (or Enter). Go back to the Basic Palette and layout grid by dragging the Image icon from the basics resize it relative to the image, then type some text 
double click on New Layout Grid. It should appear palette. Position it on the right of the grid and browse in the box and format it using the Style menu. Save 
below the logo you placed. for glowraygun.gif in the Inspector. the document. 
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Co. You can also type URLs for frames directly into Co. Click on the Layout tab to return to normal 
the URL box. Click in the 'navbar' frame to make view. You'll see that the page is still blank - this Go to File>Save to save your work, then click 
it active, then type navbar.html in the box, or click on is because it's the default 'no frames’ view. Type ina on the Preview tab in the document window to 


browse to use Finder or Windows Explorer to look for message such as 'You need to get a browser that can see what you've done. It won't look like much so far, 
the document. You can even drag and drop documents show frames’. Then click again on the page icon to alter _ but that's the best way to check your frames-based 
directly from the desktop. page properties and give your page a title. layout is working in Adobe GoLive 4.0. 
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Stage Four: Adding more pages and navigation 


Time to start expanding our Website 


Go back to the Site Window and double-click on 
newpage.html in the stationery folder. In a real 
world situation we would now turn this page into a 
template for our default pages. In the case of this 
example site we simply type a message telling the user 
that this is a placeholder page, and giving a link back to 
main.html. Save the document and close it. 


Co. Close all open windows except the site window 
and double click on navbar.html. Click on the 
Page icon and set the background colour of this page 
to white (#FFFFFF). In the Background Image box 
below, browse for background1.gif in the 'images' 
folder of your site. 


Browse or Point and Shoot to the image 
ball1.gif in the 'images/buttons' folder of your 
site. Next, select the Over button-state icon, put a tick 
in the check box and browse for an_ball.gif in the same 
directory. This creates a simple rollover with a static 
image for the main button accompanied by an animated 
GIF for the rollover-state. 


Click on the Site Extras tab and drag as many 
new pages as required to the main folder in the 
Site Window. In the example site there are six, named 
contact.html, search.html, tops.html, saucers.html, 
robot.html and balls.html. 


With the cursor active in the document window, 
go to the Basic Palette and double click on the 

New Table icon. With the table selected, set the 
following properties in the Inspector: Rows 4, Columns 
1, Border 0, Cell Space 0 and Cell Pad 0. Align the table 
in the centre of the page by choosing the Centre 
formatting icon on the toolbar. Click inside the top cell 
of the table ready to insert some content. 


Co. Click on the Status and Link tab. Use the 

Point and Shoot targetter to link the button to 
balls.html. In the Target box click the drop down 

menu and choose (or just type) 'main'. This ensures 
the page appears in the right hand frame when the link 
is selected. 


< Adobe GoLive 0 web special > 


a GT 


Now that these pages are in place, even 
though they're empty, it allows us to use Adobe 
GoLive's site management tools much more efficiently 
as we place navigation. If you attempt to link to pages 
that don't exist in GoLive 4.0, the Debug icon appears. 
This can obscure situations where there really are 
broken links. 


Click on the CyberObjects tab in the Palette. 
CyberObjects are specific combinations of HTML 
and JavaScript that perform advanced actions. Double- 
click on the Button Image icon to place a 'rollover' type 
action in the first cell of your table. In the Inspector 
give the button a name, then click on the Main button- 
state icon. 


stoys bring you the smallest range of 
toys on the net. Why? quite simply 
because we don't exist! It's a pity, we 
realise, but there you go. Egg is eggs 
and all that. Doing 4 ‘Toy Site’ just gives 
us an excuse to use nice bight colours 
and 4 couple of groovy pictures - but it's 
allin 3 good cause! 


Sanh} 


Type a message that will appear in the status 

bar when the cursor is placed over the button. 
Place the remaining three buttons in the same way. All 
the images are in the 'images/buttons' folder in our 
example site, with the second stage of each button 
pre-fixed by 'an_'. To see how the finished example 
should look, load in index.html from the tutorial folder 
on the CD. EI 
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BSCRIPTION FORM 


" . 1 , = 
spheres: oneal = | » Great savings! 
__] Europe (inc Eire & North America)* £82.00 
L] Rest of the world* £99.00 x 

* AIRMAIL 

YOUR DETAILS ™ = 
re___rs_sa > Every issue delivered 
Address 
a ct direct to your door 


Daytime telephone number 


PAYMENT METHODS 
Please choose your method of payment 1, 2, 3 or 4 


(Free in the UK) 


Zz. O Direct Debit (uk only) Complete the form below. Full amount will 
be deducted in advance and in one lump sum 


2 «Ol Cheque Payable to Future Publishing Ltd. Sterling cheques drawn on 


a UK account 


| > Never miss an issue 
| Of your favourite 
sets —_ _ | magazines 


3. Visa MasterCard 


4, C Switch Issue no. and Valid date 


Your subscription will start with the next available issue 


UK readers return this coupon (no stamp required) to: 

Future Publishing, FREEPOST BS4900, Somerton, Somerset, TA11 6BR. 
Overseas readers return this coupon (postage payable) to: 

Future Publishing, Cary Court, Somerton, Somerset, TA11 6TB, UK. 


Receive the next 12 issues of Computer Arts AND 
the next six issues of Computer Arts Specials (out 
every other month). 


Ciease tick this box if you would prefer not to receive information on other offers. 


Instruction to your Bank or Building Society to pay Direct Debits. 


Originator’s Identification Number 


9| 3] o| 7] 6] 3 


Please send this form to address shown 


All Computer Arts subscribers receive a unique 
limited edition copy with the cover image intact 


1, Name and full postal address of your Bank or Building Society branch 
To: The Manager 
Bank/Building Society 


Address and uncluttered by words. 

Postcode 
2. Name(s) of 
mee Cover-mounted CD-ROM featuring demos, images, 
. Branch sort code (from the » 
tee ide he corer ot yom et | | | resources and often full products, with every 
PETER issue of both magazines. 


5. Instruction to your Bank or Building Society 

Please pay Future Publishing Direct Debits from the account detailed on this Instruction subject to 
the safeguards assured by the Direct Debit Guarantee. | understand that this instruction may remain 
with Future Publishing and if so, details will be passed electronically to my bank or building society. 


—_— Hurry — this is our 
best ever offer! 


You may photocopy this blank form and then complete it. 
You cannot fax or e-mail direct debit forms. 


Order code: COSPJO7 Offer ends 02.04.00 


66 | computer arts | web design special 


< subscribe & save web special > 


Subscribe to Computer Arts and Computer Arts Specials 


Save 


t +44 (0)1458 271 108 
e subs@futurenet.co.uk 


IMPORTANT: Please quote code COSPJO7 when ordering. Telephone lines open 8am-8pm, Mon-Fri 
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away homelands 


homelands homelands 
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london 


Towards the end of 1999, Black was commissioned to design 

a Website for the London nightclub Home, as well as other clubs 
owned by Home Corp. The site’s design had to reflect the brand 
and styling of the club itself, and appeal to a relatively precise 
clientele. As part of the deal, Black has built an interactive 
video installation in the nightclub. Visit w www.homecorp.com 


nteractivity and excitement are the two key ingredients 
Web designers strive for as the Internet becomes the 

2 Al multimedia medium of tomorrow. However at the same 
time a site has to fulfil real objectives — it has to work; it 

has to have a point; and it has to justify its existence. 

With an 11-year history in corporate IDs and branding, Black 
Information Design is a new media company which tries to keep 
focused on the goals a Website sets for itself while bringing into 


“There’s a huge sense of ‘oh God, we've | the bargain powerful, relevant design and the right kinds of 


| interactivity and animation. This is probably why the Website 


got to do something now. Let's just get | Black created for J&B Scotch has just picked up the London 


i 2 International Advertising Award for Best Beverage Website. 
a site up and then we Il think about the The site's a visual treat and is proving very ‘sticky’ with 


visitors. Part of the secret is the virtual table football 


objectives later. : There’s a lot of naive competition hosted at jbscotch.com. This amazing little Web 
Web design going on at the moment 99 game is one of the best we've seen, but as Gordon Black, 
+ | 


founder of the company explains, it's something which fits right 
says Gordon Black, head of Black ID —_|_sin with J&B's brand image. 

| "We asked J&B about how they promoted the brand 
worldwide, and they actually sponsored table football in a 
number of countries," says Gordon. "What they did was set up a 
world table football competition. So off the back of that we 
decided that we would do virtual table football.” 

Like so many others in the field, Black is big into Flash and 
Shockwave technologies. However the firm keeps a diverse look 
across its work. The Websites for J&B Scotch, Swedish Assured 
Farms and the Society of Financial Advisers are each unique — 
unlike with other Web agencies you won't find any predominant 
design foibles or 'thumbprints' all over the place. This could well 
be down to the way the Black ID tackles its projects. 

To each site the company appoints a team comprised of a 
designer and a Web author. "A designer from a traditional 
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Black ID specialises in Web games — here’s a breakdown of the table football game created for the award-winning J&B site... 


INTELLIGENCE CREATIVITY EXPLORATION EXPOSURE OCCASION CONNECTION INTELLIGENCE CREATIVITY ExXPmOmAT EXPOSURE ODCASION CONNECTION 


ABLE FOOTBALL 


6 Play the Gare 


The purpose of the game was to promote J&B Co. Using object-orientated programming the game 

Scotch as sponsors of the table football world took a relatively short time to develop and test Director submits the score to a Microsoft 
cup. Jbscotch.com was developed using Shockwave considering the complexity of the functionality. The Access database, via an active server page (ASP) 
technology throughout; hence the obvious Lingo code delivers collision detection, sloping angles, written in Visual Basic script. The ASP checks the 
development platform for the game was Macromedia ball spin, speed and direction. Using shared casts to user’s previous score and updates it, should it be a 
Director. With this very ‘real’ virtual football game, control the scalability of the site’s top level, the new personal best. This information is then 'pinged' 
users can see how they compare with other players, in game's weight was trimmed down to only 84k. To date, back to Director, which refreshes and displays the 
worldwide rankings. over 3000 players have entered the league. relevant information on the league table. 


background who may understand the intricacies of //lustrator and 
Photoshop, teamed up an author who understands Director and 
Shockwave - it's a pretty awesome combiniation when they're 
both talking about delivering something that not only looks good 
but technically is achieving something that's never been done 
before," says Gordon Black. 

"We've got 35 people working here," he continues. "We've 


One of Black ID’s best known 
clients is the fast food chain 
Burger King. The site will be 
going live in February and 
promises a new Web game by 
the company, as seen below. 
See w www.burgerking.co.uk 


got teams of individuals that all produce very different looking SLAP 
work based on the values of the businesses we're working on ITON 
behalf of.” ze 

With a team in place, the company then works through its HEAVEN 


eight-step process for producing Websites. You can see an val 4 an ; 

outline of the process at Black's Website, and it basically a py 
ensures nothing gets missed and that everyone at the company eRe eles |)\\\)|"= 
fulfils the expectations of their clients. It seems too many Web ‘ WHOPPER HEAVEN 

design companies give their benefactors false hope of whatcan | Sn aes ey Seen were Manav Pete faust 

be done on a Website, while at the same time a lot of companies 


K 


out there don't quite know what they actually want their on-line 
presence to achieve. 

In the future, Black sees the online technologies being split 
into two categories — 'lean forward’ and ‘lean back’. Lean 
forward will be Web-based activities on desktop computers. It 
will be predominantly business to business and done at work. 
Lean back will take place in the home — ordering goods through 
interactive TV, for instance. 

Which area will Black ID gun for? "That is the $65million 
question at the moment," says Gordon. "We're doing both, right 
now, big time. That means the agency might be split in two in the 
next five years. | can see it moving in two routes because we 
don't want to wave goodbye to one — we have to develop both. If 
we're just stuck between both then we'll just lose it." EES 


You can link to all the sites mentioned here through W www.blackid.com. 
Alternatively t 0141 242 1800 for more details. 
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The definitive guide to Web design * Mac & PC 
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MmarPoguide 


C 


omputer Arts Special’s indispensible guide to Web design software 


THE BUYER’S GUIDE IS OUR ESSENTIAL A-Z OF THE VERY BEST WEB DESIGN SOFTWARE ON THE MARKET. 
NOTHING BUT THE BEST IS LISTED, SO BE SURE TO CONSULT IT BEFORE YOU MAKE YOUR NEXT PURCHASE... 


Acrobat 4 


PC/Mac * £188 * Adobe 

t 020 8606 4000 

Ww www.adobe.co.uk 

Acrobat converts documents or whole 
Websites into PDF (Portable Document 
Format) files that preserve the 
original's appearance. Version four is 
more tightly integrated with Microsoft 
Office applications, enabling you to 
create a PDF file by clicking a button on 
the toolbar. 


BBEdit 5.1.1 


Mac ¢ £116 * Mygate 

t 020 8297 9699 

w www.barebones.com 

BBEdit enables you to search and 
manipulate text and is said to be the 


Fancy turning that old photograph into a 
3D walkthrough? It’s easy with Canoma. 


Is this the best Web authoring tool? 
Dreamweaver is the top choice for many 
pros, and version 3 is now available. 


70 | computer arts | web design special 


best such tool available for the Mac. 
Many of its features have been 
developed specifically for Web authors 
who wish to edit HTML. It includes a 
Web-safe colour palette and a table 
builder. 


BeyondPress 4.0 

PC/Mac ¢ £199.99 * Computers Unlimited 
t 020 8358 5857 

W www.extensis.com 

If you already have Quark XPress, this 
XTension will turn your documents into 
Web pages. Among the features 
BeyondPress adds are hyperlinks, 
image maps, support for QuickTime 
movies, Java applets, and animated 
GIFs. You can use it either to create 
new layouts or re-design existing Quark 
pages. 


Canoma 

PC/Mac ° £399 * Computers Unlimited 
t 020 8358 5857 

Ww www.metacreations.com 

Canoma creates textured 3D models 
from 2D photographs. The resulting 
models may be saved as MetaStream or 
VRML2 files for direct use on Websites. 
It works best with simple geometric 
shapes such as buildings, with textures 
captured direct from the photo. 


CoolBE Light Edition 

PC/Mac ¢ Free * CoolBE 

e tech@coolbe.com 

Ww www.coolbe.com 

With CoolBE Light Edition you can 
easily design your own animated Java 
banners and billboards out of any text, 
JPEG or GIF images. You can make your 
design scroll marquee-fashion, or 
zoom and slide across the screen — it’s 
up to you. To qualify for the free 
version, you simply display ads and 
images for CoolBE. 


CorelXARA! 2 

PC °$109.95 * Corel 

t 020 7298 8505 

W www.corel.com 

CorelXARA 2.0 is a graphics tool for 
creating compressed JPEG and GIF 
images, along with animated GIFs. It 
displays the file size of images before 
you export them, along with estimated 
download times, and supports Adobe 
Photo Shop-compatible plug-ins for 
bitmap effects. 


DeBabelizer Pro 4.5 

PC © £325 * Computers Unlimited 

t 020 8358 5857 

Ww www.equilibrium.com 

Some companies don't just want a 
Website on its own but a whole range 
of digital artwork, from printed 
publications to presentations, 
multimedia and digital video. 
DeBabelizer Pro ensures that images 
are converted and optimised for each 
of these media. 


Director 7 Shockwave 
internet Studio 

PC/Mac ¢ £1110 * Computers Unlimited 
£ 020 8358 5857 

W www.macromedia.com 

Serious site designers have little 
choice but to buy Director, the software 
used to create Shockwave multimedia 
such as animation and games for the 
Web. Such multimedia can contain 
sound and video and the authoring tool 
supports Internet standards such as 
Java and XML. 


Dreamweaver 3 


PC/Mac ° £351 * Computers Unlimited 
tf 020 8358 5857 

W www.macromedia.com 

Probably the best-loved professional 
Web authoring package on the market, 


Dreamweaver has achieved its 
popularity thanks to its excellent 
editing tools and WYSIWYG interface. 
With Dreamweaver 3 you can modify 
tags without leaving the design view 
and create paragraph styles for text. 


Drumbeat 2000 

eCommerce edition 

PC * £399 * Computers Unlimited 

t 020 8358 5857 

W www.macromedia.com 

Drumbeat 2000 enables you to build 
an on-line store that's not only secure 
but capable of selling thousands of 
products. The shops you construct with 
Drumbeat can have sophisticated 
features such as built-in shipping 
calculations, frequent shopper points, 
and automatic order confirmation. 


Electrifier Pro 

Mac ¢ $395 ° Electrifier Inc 

t 001 919 806 4000 

WwW www.electrifierpro.com 

Liven up your Website with animation, 
digital sound, synthesised MIDI music 
and virtual reality walkthroughs with 
Electrifier Pro, \t's a drag-and-drop 
authoring tool that exports to animated 
GIF and QuickTime formats so you can 
be sure that browsers see your 
creation as you intend. 


Fireworks 3 

PC/Mac ¢ £210 ° Computers Unlimited 
t 020 8358 5857 

W www.macromedia.com 

From the very start, Macromedia’s 
Fireworks considerably simplified the 
task of creating vector graphics and 
optimising bitmap images for the Web. 
The latest version includes 
sophisticated Web design functions, 
such as the ability to attach HTML or 
JavaScript to a graphic object. 


Flash Writer 

PC/Mac ¢ free * Macromedia 

t 01344 458 600 

Ww www.macromedia.com 

If you already use /I/ustrator for design, 
this free plug-in for Adobe's product 
enables you to save your work directly 
as a Flash Player (SWF) file without 
having to reformat it from a bitmap. Of 
course, you still require Flash 4 if you 
want to add sound and interactive 
elements. 


Flash 4 

PC/Mac * £304 * Computers Unlimited 
f 020 8358 5857 

W www.macromedia.com 

Flash is arguably the de facto standard 
for vector animation on the Web, and 
Flash 4 is the tool you need to produce 
your own multimedia movies. This new 
version supports streaming MPEG3 
audio, expanded scripting commands 
and editable text boxes. 


Freeway 2.0 

Mac ¢ £199 ° SoftPress Systems 

t 0800 731 3425 

W www.softpress.com 

Freeway 2.0 is a complete Web 
authoring solution for Macintosh 
users, enabling you to lay out HTML 
pages, ready graphics for the Web, 
upload and maintain your site. The 
interface is intended to make it quick 
and easy for beginners and design 
pros alike to use. 


FrontPage 2000 

PC © £105 © Microsoft 

t 0345 001000 

Ww www.microsoft.com 

Microsoft's Website creation and 
management software naturally lets 
you work with common Web 
technologies such as Dynamic HTML, 
cascading style sheets and ASP, and 
this latest version has been beefed up 
to support script and Visual Basic too. 
Usefully, hyperlinks in your site are 
changed automatically whenever you 
move a page. 


Generator 2 

PC/Mac ° £2349 * Computers Unlimited 
t 020 8358 5857 

W www.macromedia.com 

Generator enables you to produce 
interactive graphics for your Website, 
changing in response to live or 
regularly updated information. Such 
applications include advertisements, 
calendars, charts, maps and 
headlines. The latest version includes 
a drag-and-drop objects palette and it 
also enables you to export QuickTime 
4 files. 
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Go ona graphics diet 


inc: one easy way to lose 
viewers on your Website, it's using 
pictures and graphics that take an age to 
download because they're so large. 


Compressed file formats such as JPEG 
and GIF are much better suited to the 
Web, but you can cut them down still 
further with dedicated graphics utilities. 
Image Optimizer 2 claims to 


GIF Construction Set Classic 

PC © $20 Alchemy Mindworks 

t 001 905 936 9501 0r 

e sales@mindworkshop.com 

Ww www.mindworkshop.com/alchemy/ 
gifconcl.html 

GIF Construction Set Classic contains 
everything you need to create GIF 
image files for the Web, including 
transparent, interlaced and animated 
varieties. It's also designed to be easy 
to use, with a wizard for creating 
banners and other animated GIFs 
quickly and without programming. 


GoLive 4 

PC/Mac © £210 Adobe 

t 020 8606 4000 

W www.adobe.co.uk 

This high-end Web development 
package enables designers to do 
everything from coding simple HTML 
through more sophisticated 
programming with Javascript, Dynamic 
HTML. The site management tools are 
much improved in this new version, 
which also boasts a QuickTime movie 
editor. 


Headline Studio 

PC/Mac ¢ £210 ¢ Computers Unlimited 
t 020 8358 5857 

W www.metacreations.com 

Banner ads are a fact of life for many 
Websites, and Headline Studio is a 
bespoke package for producing them. 
You can create and edit text within 
Headline Studio but graphics must be 
imported from other packages. The file 
sizes of ads is a little on the large side. 


HomeSite 4.5 

PC ¢ £71.25 ¢ Unipalm 

t 01638 569 600 

Ww www.allaire.com 

A WYSIWIG HTML editing and site 
management tool, HomeSite 4.5 
supports the very latest Web 
technologies such as Dynamic HTML, 
cascading style sheets and JavaScript. 
Developer Allaire prides itself on the 
fact that HomeSite generates pure 
HTML, without adding any unnecessary 


automatically trims file sizes by 50 per 
cent and enables you to work on 
particular parts of an image to cut them 
still further. See W Www.xat.com for 
more information. 

Meanwhile CyberView Image 4.5 
works as a standalone package or asa 
Photo Shop plug-in for compressing JPEG 
images. Visit W www.cyberviewcd.com 


code that can slow your Website’s 
download times. 


HotDog Express 


PC ¢ $39.95 * Sausage Software 

t 001 03 9662 2627 

W www.sausage.com 

Unlike HotDog Professional, this 
Express version is designed with 
novices in mind. It enables people 
unfamiliar with the Internet to create 
simple Web pages with ease, but you 
cannot use it to edit new or existing 
HTML code. Once you have registered 
the software, you can upload your site 
to a server. 


HotDog Professional 5.5 

PC © $129.95 * Sausage Software 

t 001 03 9662 2627 

W www.sausage.com 

HotDog Professional is an authoring 
tool aimed at professional Web 
designers, with code-based HTML 
editing site and management tools. 
The latest release opens documents 
faster than previous versions and 
supports multiple users so that 
several people can work on a site over 
a local network. 


HTML Assistant Pro 


PC * $89.95 ° Exito Digital Systems 

e info@exito.com 

t 001 902 835 2867 

W www.exito.com 

HTML Assistant Pro is a Web authoring 
tool that comes complete with an 
export wizard that checks pages in any 
browser. It supports multimedia tags in 
the code and automatically converts 
rich text format (RTF) files into HTML, 
enabling you to import documents 
from a word processor. 


HoTMetal Pro 6.0 


PC ° £116 ° Softquad 

t 020 8387 4110 

W www.softquad.co.uk 

HoTMetal Pro 6.0 is a comprehensive 
bundle for building sites, including a 
drag and drop design tool, graphics 
utility, Web server and site 


management software. You get all this 
for a fraction of the price of rival 
offerings such as Dreamweaver and 
FrontPage. 


HTMLed PRO 3.0 

PC ° $59.95 

Internet Software Technologies 

e sales@ist.ca 

W www.ist.ca 

HTMLed PRO is a Web authoring tool 
complete with editors for cascading 
style sheets, image maps and 
animated GIFs, a spell checker, and a 
project manager for site maintenance. 
The latest version also features syntax 
checking of code and a new FTP 
interface. 


IBM HotMedia 2.5 


PC/Mac ¢ free ° IBM 

t 0990 426 426 

W www.ibm.com 

HotMedia is an authoring tool for 
spicing up sites with animation, 360- 
degree panoramas, streaming audio 
and many more special effects. To 
view HotMedia sites, viewers do not 
have to load plug-ins because the 
server automatically determines which 
players are required and loads them 
automatically. 


ImageStyler 1.0 

PC/Mac ¢ £104.50 * Adobe 

t 020 8606 4000 

W www.adobe.co.uk 

Intended for creative business people 
wishing to jazz up their site, 
ImageStyler optimises graphics for the 
Web and possesses effects suitable 
for both text and pictures. In addition, 
it enables you to create JavaScript 
rollover effects and image maps 
without resorting to HTML code. 


NetObjects Fusion 4.0 


PC ° £234 ¢ Twilight Zone 

t 01923 801 812 

W www.netobjects.com 

NetObjects Fusion is beloved of 
business users because of its strong 
site and resource management 
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capabilities. The latest version boasts 
a beefed-up design tool, which 
supports Dynamic HTML programming 
and enables you to export a site that's 
optimised for different browsers. 


Netscape Composer 

PC ¢ free * Netscape 

t 020 8564 5100 

Ww www.netscape.com 

To get a basic site on the Web quickly 
you don't need to spend any money at | 
all on software. In fact, you may even | 
have a tool that will do the job right 
now. Composer is a component of 
Netscape Communicator, which you 
can download for free. 


Paint Shop Pro6.0 | 

PC ¢ £106 ¢ Digital Workshop 

£ 01295 258 335 

Ww www.digitalworkshop.co.uk 

The popular image editing application 
has several Web-specific features in its 
latest incarnation. It enables you to 
create and edit vector graphics, as well 
as the more regular bitmap variety, and 
includes Animation Shop 2 for making 
moving images and text. 


and PhotoAnimator, a tool that enables 
you to create GIF animations. 


Photoshop 5.5 
PC/Mac * £399 * Adobe 
t 020 8606 4000 

W www.adobe.co.uk 
Photoshop from Adobe has long been 
the premier graphics application for 
professional designers, and the latest 
version has been beefed up for the 
Web. It includes Adobe's own 
ImageReady 2.0, which enables you to 
process and optimise graphics for the 
Internet. 


Quarkimmedia 1.5 — 

Mac only ¢ £464 * Quark 

£ 01483 445 566 

W www.quoark.co.uk 

If you already own version 4.02 or later 
of either Quark XPress or Quark XPress 
Passport, you can use Quarkimmedia 
to create interactive multimedia with 
video, sound and hypertext links. It's 
especially well-suited for hybrid CD- 
ROM/Internet projects. The Viewer 
software required to play the 
multimedia is free. 


Painter 6 Ler 15i QuickTime 4Pro __ 
PC/Mac * £299.99 * Computers Unlimited PC/Mac * $29.99 * Apple 
t 020 8358 5857 t 0870 600 6010 

Ww www.metacreations.com W www.apple.com 


Painter is the software artists use to 
mimic natural media in the digital form, 
but it isn't restricted purely to print 
uses. It supports layering of vector and 
bitmap images, and also enables you 
to output finished work to the Web. 


PhotoTools 3 __ oe 
PC/Mac © £99.99 * Computers Unlimited 
t 020 8358 5857 

W www.extensis.com 

As its name suggests, PhotoTools is a 
collection of special effects for both 
Web and print designers. This third 
edition has been enhanced with 
multiple light sources for shadow 
effects, customisable bevel shapes | 


Splash! Java applet 


Ensure that your site makes an impact 
with Splash. It's an easy-to-use authoring 
tool, but you can't edit the HTML code. 
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The commercial version of QuickTime 
enables you to create and edit movies 
and sounds as well as play them. The 
authoring tool enables you to colour 
tint movies and also includes support 
for streaming, so that visitors to your 
site can watch video clips almost 
immediately. 


RealProducer 7.0 

PC/Mac ¢ free * RealNetworks 

t 0870 240 2486 

Ww www.realnetworks.com 

If you want to create RealAudio and 
RealVideo files to stream from your 
Website, Rea/Producer is all you need 
and you can download it for free from 


Read the script 


you wish to add a few special 
effects to your Website, or a dash of 
interactivity, you may pall at the 
prospect of paying out for anew Web 
authoring tool just to keep up with new 


technologies. Especially if you're 
perfectly happy with your existing 
software or your budget is tight. 
Thankfully it's easy to find small 
programs that do the job. For instance, 
the $35 Scribbler is an editor for 


RealNetworks’ site. A commercial 
version, RealProducer Plus creates 
better quality video and enables you to 
customise the codecs. 


Splash 1.2 

PC * $49.95 * Beam International 

W www.gosplash.com 

A low-cost, drag-and-drop, authoring tool 
that simplifies the process of creating 
Web pages. You can add text, pictures 
and tables, and there's a step-by-step 
wizard for designing Java applets. On 
the down side, it does not permit you to 
edit the underlying HTML code. 


Superscape 3D 

Webmaster 

PC © £600 © Superscape 
£01256 745 745 

W www.superscape.com 

There's nothing better than a dash of 
whizzy 3D to spice up a bland Website, 
and that's exactly what 3D Webmaster 
enables you to do. You can export the 
3D worlds it produces in either VRML 
or Superscape's much more compact 
proprietary format to your own site. 


StyleMaster Pro 

PC/Mac * $49.99 * Western Civilisation 
esm-info@westciv.com 

W www.westciv.com 

StyleMaster Pro does a very specific 
job. It enables you to create cascading 
style sheets, such as text and text 
layouts styles, just by pointing and 
clicking. You then export the style 
sheets as CSS files, since Style 
Master Pro cannot be used for HTML 
editing. 


Viscosity 

PC © $179 ¢ Jedor Inc 

Ww www.jedor.com 

An animation package that combines 
the qualities of photo-manipulation 
software and video editing tools, 
Viscosity enables you to create or 
import movies. Editing may be 
performed on individual frames, 


JavaScript, VBScript and DHTML, with 
standard elements of each language 
that you drag and drop into your code. 
See W www.creamsoft.com/scribbler. 

Likewise, you can create some great- 
looking animated images and page 
furniture with CoffeeCup's range of low- 
cost Java software, such as the Applet 
Effects Factory and the Applet Button 
Factory. Visit W www.coffeecup.com to 
find out more. 


specific sequences that are sequential 
or non-sequential, or the whole movie. 


WebExpress 3 


PC © £57.58 ° The Thompson Partnership 
t 01889 564 601 

W www.ttp.co.uk 

WebExpress 3 is a WYSIWIG authoring 
tool aimed at novice designers, 
enabling them to design sites with 
tables, forms and frames although 
strangely not Java. A style sheets 
editor is built in but you can't edit 
HTML code within the program. 


Web Marquee Wizard 3.04 

PC ¢ free ¢ Basil Hussain 

e@ majid@cocoon.co.uk 

Ww www.cocoon.co.uk/users/majid/ 
marquee 

The freeware Web Marquee Wizard 
produces the HTML tags that generate 
marquee text on a page. The software 
automatically generates the HTML 
code and allows you to specify page 
layouts and fonts. 


WebSuite 

PC « free * James Baster 

e@ james@websuite.findhere.com 

Ww www.baster.freeserve.co.uk/ 
websuite/index.html 

WebSuite is a collection of three free 
programs for site authors, including a 
program for creating colour screens 
and one that keeps track of simplifies 
the process of keeping track of links 
when you write HTML code. A third 
displays source code from other sites. 


Xara3D 3 

PC ¢ $39 * Xara 

t 01442 350 000 

W www.xora.com 

Enliven a flat Website with 3D images 
courtesy of Xara 3D. The software 
enables you to control the text, font, 
depth and lighting of the 3D models, 
which update in real-time as you edit 
them. They may be animated and 
exported as AVIs or GIFs. EEE 


Is takes a lot of 
Caffeine molecules to —~ 
make the parfe: . 


Tou're strange Margaret * 
— 


Coffee Cup Software is the place to find 
low-cost Java software on the Web. 
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Dreamweaver 3 


IT'S THE WEB AUTHORING TOOL BELOVED OF CREATIVE DESIGNERS — WE 
SHOW YOU HOW TO MAKE THE MOST OF ITS INNOVATIVE NEW FEATURES 


n the space of two short years Macromedia 
Dreamweaver has become the standard Web 
authoring tool for creative designers. Now in 
its third version, the package is still in a 
position to take advantage of future developments on 
the Web. In the industry, e-business and e-commerce 
have become buzzwords and Dreamweaver 
acknowledges this with Roundtrip Code and data 
import. The program can be customised for specific 
projects so that team members and clients alike can 
use the same package in the development cycle. 
Dreamweaver also prepares us for the next wave of 
Web development with a core built around XML, the 


extensible scripting language expected to go 
mainstream as browser'support comes on-line. 
Macromedia continues to streamline the features 
that earned it so much praise in the first place, while 
closer integration with Fireworks 3 and formats like 
Shockwave Flash is another real advantage. 
Dreamweaver lets you keep one eye on the future 
without forgetting what's important now — sound tools 
for demanding designers. We take a look at how 
features old and new perform in Dreamweaver 3. 


Dreamweaver 3 costs £299, contact Computers Unlimited on 
t 020 8358 5857, or visit W www.macromedia.com 


Stage One: Building the page 


Setting up your site is straightforward with Dreamweaver 3 


[dete rodified a [dete rodified a 


Today, 10:26 am 4 
[=| 
[=] 


InoZ 


Wain BO eDerS 


Make a folder on your hard drive called 
Weekenders then drag and drop the Images 
folder from the dual\DW3files directory on the CD to it. 

You may add other folders as required later. 


Co. Start up Dreamweaver 3. Go to Site>Define 
Sites and select New. Give the site the name 
Weekenders and browse to the directory you created 
on your hard drive at stage one. Click OK. 


Background: | 
rico) coo 
Links: MW [¢333399 ] Active Links: | [errrerr | 
tenMargin:[ | Marginwiatn:[ | 
Top Margin: ee) Margin Height: isco 
Document Encoding: 


Image eae) 1999, 
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Coane) 


Transparent Opaque 
Document Folder: Macintosh HD:Docs:dw3site I:weekenders: 


Site Folder: Macintosh HD:Docs:dwa3site lweekenders: 


Cte) 


Co. Go to Modify>Page Properties. Give the page 
the title Weekenders (see a theme emerging 
here?), set the background colour to #FFFFFF and 
select text and link colours. Click OK and go to 
File>Save to save the page. 


CG. Now to start adding elements to the page 
using Layers. Go to the Object palette and click 


the Layer button. Drag and draw a new Layer in the 
document window near the top left corner. When 
you've finished click on the Layer to make it active. 


santaphobia presents 


2%. Beer Frenzy! 


|] Places to go, people to see beer to 
drink! But where oh where to drink it? 
Check out our special guide to the best| 
pubs and clubs in the North West, 
rated by the people that matter most - 
you! This month we kick off with a look 


at Leeds. 
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Stag Party Idea 


No more putting your mate on. 
the 2.10 to Edinburgh... 


CG. Open the example file index.html from the 
dual\DW3files directory on the CD. You'll notice 
that some Layers contain tables. We've used standard 
table-based layout techniques within Layers to 
minimise the need to nest Layers unnecessarily. This 
not only increases compatibility with a wider range of 
browsers, it also makes the pages faster. 


G. Click on the Image icon in the Object window 
and drag to the newly created layer. Browse for 


the file topstrap.gif in the images folder of your site. 
Our entire page is made in this way using positioned 
Layers containing HTML elements... 
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In the Site Window, right-click (or Ctri-click on 
the Mac) on your site's main folder. Select New 
File from the context sensitive menu. Rename the file 


index.html, then double-click on it to launch it in the 
document window. 


oC. Go to the Properties window (if it's not open, 
choose Window>Properties) while the new Layer 
is active. Set the width of the Layer to 360 pixels and 
the height of the layer 80 pixels. Set the position of the 


Layer to T (for Top) 15px and L for left 20px. In Layer ID, 
give it the name ‘strap’. 


When using invisible tables for layout within 
Layers, treat them as you would in any standard 
HTML page. It's a good idea to make your table the 
exact same size in pixels as the Layer you're using. 
Once you start building a page with Layers, don't 
place any elements outside them as the results can 
be unpredictable. 
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Stage Two: Creating a dropdown menu with Dynamic Layers 


Dreamweaver 3 offers a tasty way of designing menus 


Co, Start by creating a new layer in the document 
you began working with. Set its dimensions to 
100x60 and use the Properties window to exactly 
position it at L: 375px T: 20px. Name the Layer 'mask'. 


We ite BU EDSS 


Create another new layer measuring 100x80 
below the last one. Position it at L:375 T:80 
and name it 'logo'. Place the image 'santalogo.gif' 
within. Next, go to Window>Timeline to open the 
Timeline Window. 


cer C) com} 
mere 1) +f) 
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CG. Select the key frame at frame 20 in the 
Timeline Window. Click on the Behaviours tab 
and click the '+' icon. Choose Timelines>Go to Frame 
and select 'frame 1' from the dialogue. Before 


leaving the Timeline Window, make sure the Autoplay 
box is checked. 
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eo. Click within the Layer 'mask' to place the 
cursor, then choose Insert>Image. Browse for 
‘dropmask.gif' in the 'images' folder of your site. 
Create a second Layer in the same way as the first, 
again positioned at L: 375 T: 20, but with dimensions 
set to 100x80. Name it 'dropdown'. 


CG. Click in the first frame of the timeline, select 
‘dropdown’ in the Layers Window, then go to 
Modify>Timelines and select Add Object to Timeline. 
The object (our 'dropdown' Layer) appears as a bar in 
the Timeline Window. Drag the end frame so that the 
bar stretches from frame '1' to frame '20'. Click on 
frame '10' in the timeline. Go to Modify>Timeline> 
Insert Key frame. 


CG. In the document window, select the image 
tabbutton.gif in the 'dropdown' layer. Go to 
Window>Behaviours to activate the Behaviours 
Window. Click the Actions icon and select 
Timelines>Play Timeline. OK the dialogue that appears. 


ore as 
Eeescerewy 


Go to Window>Layers to open the floating 
Layers Window and select the 'dropdown' Layer 
you just created. Click within it and add the following 
images in this order from the images folder: 


searchbutton.gif, mapbutton.gif, weekendbutton.gif 
and abbutton.gif. 
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CG. Select the key frame at frame 10. Move the 
‘dropdown' layer to L: 375 T: 80. Select key 
frame 20 and move ‘dropdown' back to L: 375 T: 20. 
Re-select frame 10 and click on the Behaviours tab in 
the Timeline window. Click the 'Actions' ('+') icon 
and select Timelines>Stop Timelines. Add the same 
Behaviour to the key frame at frame '1' in the 

same way. 
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Go to the Layers Window. Change the 'Z' order 
of the layers you've created by clicking on the 


number in the right column and typing in a new one. 
Set 'mask' to '3' (the top layer), 'dropdown' to '2' 
(the middle layer) and 'logo' to '1' (the bottom layer). 


Stage Three: Design Notes one of Dreamweaver 3's new features 
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Design Notes are a new feature that can help 
when you're working collaboratively or 
individually on a project with a long development cycle. 
They allow you to attach descriptive notes to objects 
and pages within a site that can be accessed by other 
developers within Dreamweaver. 
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To attach Design Notes to a page, open the 
page and go to File>Design Notes. The Status 
drop-down allows you to choose from one of several 
stages in the development cycle, from Draft to Final. 
You can also define your own labels by clicking on the 
All Info tab and adding a descriptive name and value. 


Stage Four: QuickTags Editing your site is now a whole lot easier 


Using the HTML source window can slow 
down the performance of Dreamweaver - the 
package essentially switches into 'source code 
mode’. In Dreamweaver 3 you can use the QuickTags 
editor instead. 


Co. Click and hold the position marker in the 
History window and move it up. As you do, each 
action is removed a step at a time in the main work 
area, allowing you to roll back to any stage in the page- 
building process. Slide the position marker back to the 
bottom to revert to the page's final state. 


Select a point in your document that you need 
to edit directly and launch the editor with Ctrl-T in 
Windows (or Command-T on the Mac). Use the same 
keyboard shortcut to switch between Insert HTML, 
Edit Tag and Wrap Tag modes. A ‘hints' menu drops 
down automatically. 


Co. You can also replay actions in the history list 
anywhere else on the page. Try placing the cursor 
below the last element you inserted in a page, then 
hitting Ctri-Y (or Option-Y on the Mac) to replay the last 
action you performed. 
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Co. Design Notes can be added to individual 
objects, such as images and other media, by 
selecting the object and right-clicking (Ctri-click on the 
Mac) to select Design Notes from the context sensitive 
menu. Objects imported from Fireworks 3 contain 
automatically generated Design Notes. 


Beer Frenzy ! 


Co. Insert HTML lets you manually add HTML tags, 
Edit Tag allows you to change the current active 
tag by choosing from a list while Wrap Tag is for placing 
HTML around a selection in your document. Press the 
TAB key to cycle quickly through parameters or tag 
options. Press Enter/Return or click outside the 
QuickTag Editor to apply changes. 


Multiple actions can also be saved as new 
commands. Select the History palette and click 
on the top action, then Shift-click on the last action in 
the list to select them all or use Ctri-click (or 
Command-click on the Mac) to select specific actions. 
Click on the 'Save' icon in the History palette to save 
the actions as a command. EI 
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efore you start... 


Sort your ISP 
F Sort out the ISP or server 
you're going to use. Make 

sure you've checked it 

supports any extras you need, 
such as Active Server Pages, 

FrontPage extensions, 
passwords and so on. Also, view 

other sites using the server to 
check it’s able to deliver information 

at a reasonable speed. 


Navigation is all 

Achieving a good navigational structure 
is not an abstract puzzle. You need to 
consider what people will be looking for 
when they reach your site and how to 
make your site as easy as possible to 
navigate. Draw up your plans, writing 
down how many clicks or pages it takes 
to reach each section. 


Hit your target 
Decide who your audience is, as this 
will determine whether you use DHTML 
or Flash and so on. Do you need to 
cater to people who may have older 
browsers and slower machines? If so, 
re-you going to create two sites, one 
flashy than the other? 


structure 
re’s nothing S€ having to 
reorganise your directory structure 

after you've started putting your site 


orse thal 


Hold your mouse over tools you 

use a lot, until a tooltip pops up. 
This shows a shortcut letter for that 
tool, Y for the Slice tool for instance, 
which you can use to quickly select it. 


eo Use File>Image Info to put the 
name of your output Web page 
as it will appear in the title bar of the 
browser. Then select File>HTML 
background to set the background 
colour or tile that you want your 
image to appear on in-browser. 


If you use an imagemap, call its 

layer something informative — 
the name appears as a tooltip over 
the map when you view the exported 
file in a browser on a PC. 


Drag guides from the rulers 

before you create slices, showing 
where you want the slices to go. Select 
View>Snap To Guides, then create 
your slices. It's easier, and less likely to 
go wrong. Also, make sure rollover 
graphics don't spill into neighbouring 


Ten tips for ImageReady 2 


together. So, once you've designed a 
structure on paper, set up a directory 
structure on your hard drive to reflect 
it. Give it plenty of consideration until 
you're sure it’s satisfactory. 


Think first 

Write down all the different tasks 
involved in creating the Website, so you 
can work out how long it’s going to 
take. Allow yourself a week to create 
this list: you need time for everything 
you need to do to occur to you. 


Images 

Remember to allow sufficient time to 
gather images from all their different 
sources. This could mean phoning 
printers, advertising agencies and so 
on. You also need to allow time to scan 
and optimise them all. 


Identity 

Consider how you're going to visually 
establish the identity of your site on 
every page: you need to establish your 
style rules. These include rules for the 
font and size of text on every page, the 
positioning of the logo, the design of 
the buttons, bullets and rules, and the 
section headings. 


Templates 

Create templates for each section of 
your site. This involves working out how 
to create pages with different types 
and amounts of information, while 


slices, or the rollover will load extra 
graphics for those slices too, in the 
browser. 


oO Slice empty areas of your image 
and select Type>No Image in your 
Slice palette, to save file size for 
instance. Use the BG drop-down to 
give the area the right background 
colour. You can then type text, HTML, 
even JavaScript into the Text box. 


Double check you've created 

every state for your rollovers — if 
you're creating a number in one file, 
it's easy to forget. Also, double check 
you've added a link and words in the 
Alt and Status boxes for each link, if 
you want them. 


7) Use the different options in 
View>Preview to check how your 
graphic will look on different systems, 
including PCs (looks darker), Macs 
(looks paler) and those with 256- 
colour display. Then use File>Preview 
In to check how your graphic will look 


the 2-Up and 4-Up views to compare 


(2) Unlink automatic ImageReady 


maintaining the overall style. You may 
have'to alter your basic style rules. 


Cross-platform 

Set up two machines, preferably: 

one Mac and one PC, with as many 
different browsers loaded as you can 
lay your hands on. Then you can check 
your site looks good on every one, 
and that any DHTML you’ve used 

fails gracefully on browsers that 

won't support it. 


Check & check again... 

Draw up a list of things you need to 
check on every page ~ for example that 
all your images have ALT properties, 
that every page has a title, and that the 
links are working. Then establish the 
checks as part of your working practice 
as you're generating the pages. 


Top design tips 


Simple is best 

The key to effective design on the Web 
is to keep it simple. Don’t get carried 
away with loads of fonts, millions of 
colours and whizz-bang Java applets. 
Keep the site clean and uncluttered. 


Design inspiration 

If you’re stuck for ideas, look around 
on the Web and see what other people 
are up to. See which techniques work 
and then apply them to your designs. 


in a Web browser before you finally 
save the optimised file out. 


Use the Optimised tab to check 

how your graphic will compress 
regularly, as you create it. Thinking 
about compression while you design, 
will turn out much better results. Use 


different types and levels of 
compression for your graphics. 


slices via the Slice palette drop- 
down into User slices, then apply 
specific individual compression 
settings to them. Give your slices use- 
ful names in the Slice palette — that 
way, it's much easier if you later have 
to tweak the HTML. 


You can apply different 

compression types and levels to 
different slices, which can make a 
huge different if you image varies a 
lot in colour and gradients. Select the 
slice, then use your Optimise palette. 
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Navigation 

Keep your navigation controls the 
same throughout your site. People will 
become familiar with your navigation 


3 while the program is still running. 


| B) Use Dreamweaver 3 features so 
“= you don’t have to repeat page- 
building actions. Templates should be 
used to standardise the design of a 


few pages. 


Ten tips for Dreamweaver 3 


You can make changes to Dreamweaver 


whole site and Library components are 
better used when you're only creating a 
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system and enjoy moving around the 
site more. Also, make sure that your 
navigation is really easy to use and 
understand. 


turning it into an Object. Place the 
elements you wish to use on a new page, 
then save them in the Configuration/ 
Objects folder in a new sub-folder 
named Custom. Place an 18x18 pixel GIF 
with the same name as the HTML file in 
there as an icon. This creates a custom 
object you can use at any time. 


In Dreamweaver 2 and 3 you can 

set the Site Window as the default 
window that opens. Go to Edit> 
Preferences>General and check Show 
only Site Window at Start-up. This stops 
the program from opening an empty 
document window. 


Before saving a page as a Template, 

use Commands>Clean Up HTML to 
make sure your code will be as compact 
and as readable as possible. Run the 
command every time you save the final 
version of an ordinary page too. 


Navigation placement 

If you’ve got a lot of links in your 
navigation bar, the best method is 
to use a left-hand frame to hold the 


Dreamweaver essentially switches into 
‘source code mode’. Use the QuickTags 
editor in Dreamweaver 3 instead. 
Launch it using Ctrl-T in Windows or 
Command-T on the Mac. Use the same 
keyboard shortcuts to switch between 
Insert HTML, Edit Tag and Wrap Tag 
modes. Press the TAB key to cycle quickly 
through parameters or tag options. 
Press Enter/Return or click outside the 
QuickTag Editor to apply changes. 


rs} If you're using Layers to lay out 
pages for an environment where 


you know some end users will be 
getting access with legacy browsers, 
placing individual Layers within table 
cells will allow your pages to at least 
render the content within the Layer. Or 
you can convert your Layers-based 
pages to Tables using Modify>Layout 
Mode> Convert Layers to Tables. 


buttons. If you only have a few links, 
then use a top frame to hold your 
navigation bar. These are the two best 
ways of displaying a navigation bar. 


Content priority 

Always have the most important items 
at the top of your page — this is the first 
thing people are going to see, so you 
need to grab their attention quickly. 
Once you've got them interested, you 
can put the less important stuff further 
down the page for them to read. 


Colour schemes 

Use colour schemes that are kind 

on the eye. Keep a consistent colour 
scheme throughout the site. Don’t use 
colours that clash, such as pink and 
yellow or green and red. Choose a 
colour scheme that reflects the style 
and theme of your site. 


GIF text 

Don’t use GIFs on your site just to 
display text. GIFs can't be searched 
for keywords and they take longer to 
download than text. Use combinations 
of the <font> tag to create the 

style you're after. Failing that, use 


(@ You can reload the contents of the 
} Objects folders without restarting 
Dreamweaver 3. Ctrl-Click (or Alt-Click on 


In Dreamweaver 3 there is nowa 
‘mailto:' Object in the Objects 


Cascading Style Sheets, although 
only newer browsers support them. 


Some keyboard shortcuts are 


the Mac) on the Object Window drop- 


Reload Extensions. 


eo In cases where you find you're 

using the same configuration of 
elements across sites, certain kinds of 
navigation bars for example, consider 


% Expert tips from... Domino 


down menu arrow to get an option to 


necessary to apply certain HTML 
tags. Using Shift-Return with text places 
a line break instead of starting a new 
paragraph. Using Ctrl-Shift-Spacebar 
allows you to place an extra character 
space between words. 


Using the HTML source window 
can slow down performance; 


Palette, so you no longer have to add 
e-mail links manually in the Link box of 
the Properties Inspector. 


You can convert Word documents 

to HTML as clean as Dreamweaver's 
by saving them as HTML in MS Word, 
then using the Commands>Clean Up 
Word HTML option in Dreamweaver 3. 


Text flowing 
Make sure that the text flows well 
on the page — people don’t like to 


see many too many words on one line. 


Put your text in a column so that it 
splits the text up into chunks that are 
easier to read. Make sure that text 
flows around images properly too. 


Five hot tips from Domino: The Web agency to the blue-chips looks at the big picture in Web design... 


User-centric 

The age-old trap is to get so caught up 
in design that you lose the customer 
perspective. From the start, build time 
in to step back, get into the customer's 
shoes and ask honest questions. Is this 
user-friendly? Is it easy to navigate? 
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For design inspiration and information 
about Domino, see the agency’s Website. 


Scalability 

It’s vital to anticipate future site 
expansion. Can your design incorporate 
new elements? Can the database handle 
increased loads? The last thing you want 
is to need a complete rebuild six months 
down the line, when business grows. 


Don’t over design 

It looks cool, but does it do the job 
effectively? The design has to go hand- 
in-hand with usability. The purpose of 
a site is invariably to market a product 
or communicate information, so the 
measure of design success has to be 
how well it supports the overall goal. 


On-line strategy 
The Web is no longer just a marketing 
tool. Organisations are integrating every 


conceivable system from supply to sales, 
with intranets, extranets and every other 


kind of net. To maintain a competitive 
advantage, develop an on-line strategy 
with the inclusion of all the potential 
stakeholders in the company. 


Build traffic 

Building site traffic has to be done 
through a comprehensive on-line and 
off-line campaign. Submit to the search 
engines, yes. Purchase keywords, yes. 


Tattoo your URL on your staff's forehead — 


maybe not, but you get the idea! 


About Domino Systems... 
Domino Systems is one of the UK’s 
leading independent, full-service Web 
agencies boasting a client portfolio of 
some of Europe’s most successful 


companies. Domino's ability to deliver 
results lies in the strength of its project 
teams, a powerful combination of 
strategists, top-flight designers and the 
kind of technological expertise which 
enables it to build customised Web 
solutions that can interface with any of 
its clients’ existing systems. 

If you ask Domino what gives the 
company its competitive edge, you'll hear 
that it’s a commitment to understanding 
its clients’ businesses. “We believe that 
profitable e-commerce results come 
when you know a company’s objectives, 
when you know the marketplace, and 
when you know the audience. Only then 
can you build a site which consistently 
exceeds everyone's expectations.” 


More from W www.domino.co.uk 


Ten tips for Flash 


fy) Remember, you can’t tween 
between two drawn shapes. First, 
you must group them. However, it’s 
more efficient to create your shape 
as a symbol and then tween that. Also, 
remember that you need a separate 
layer for each object you're tweening. 


e If you're adding the same object 
to different keyframes or scenes 
and you want it positioned in exactly 
the same place in each one, copy it in 
the right position and use Paste In Place. 


To move an entire animation to 

a different position on the stage, 
first unlock all the layers that are part 
of the animation. Then click the Edit 
Multiple Frames button and drag the 
Onion Skin markers so they enclose all 
the frames used in the animation. Then 
Select All and move the animation. 


To create the effect of fading from 

one frame or scene to another, 
create a rectangular symbol the same 
colour as your movie background. Place 
it on the top layer and set Alpha (under 
Instance Properties, Color Effects) to 
zero per cent. Several frames later, set 
the Alpha to 100 per cent and set up 
motion tweening. 


If you want to create a button 

where the mouse rollover causes 
another area of the movie to change, 
create a shape in the Hit area 
corresponding to the area that causes 
the rollover. In the Over frame, adjust 
the elements you want to appear and 
disappear in another area of the stage. 


oO To control a movie clip symbol 
that’s playing in your movie (to 
make it stop, play or go to a frame), give 


Target audience 

When designing your Website, you 
should always keep your target 
audience in mind. If you're designing 
for kids, use bright, bold design. If your 
target audience is big corporate 
companies, construct a professional- 
looking site with no flashing lights or 
funny noises. 


Web-safe palettes 

When designing the graphics for your 
site, it’s important to bear in mind that 
not everyone runs their machine in 32- 
bit colour. Design your site for people 
with 256 colour monitors and your 
designs will look the same on all 
machines. Your graphics program 
should enable you to do this easily — if 
not, try an application like Fireworks or 
ImageReady. 


the instance of the movie clip aname 
(in Instance Properties). Then use the 
Tell Target action on a button or frame, 
to control the named instance. 


You can prevent the quality ofa 

bitmap being reduced when your 
movie is exported. Double-click its icon 
in the Library palette and in the Bitmap 
Properties dialog box, change the 
compression from Photo (JPEG) to 
Lossless (PNG/Gif). You can also control 
the quality of the JPEG compression for 
all your JPEG bitmaps when you export 
the movie. 


You can adjust the compression 

settings for individual sounds by 
double-clicking their icons in the Library 
palette. In the Sound Properties dialog 
box, choose your compression options 
from the drop-down menu. You can test 
the sound and check its export size. 
These settings override those in the 
Export Movie settings. 


Check for bottlenecks in your 
movie by perusing the size report 
generated when you export the movie. 
Look at the number of bytes each frame 
has to download (listed under ‘Frame 
bytes’ in the report). Bear in mind that 
a 28k modem can only deliver 1.8K 
of Flash movie info per second (that is, 
every 12 frames by default). 


If there are moments when your 

movie suffers because you're 
trying to load too many symbols at 
once, either load them all at the 
beginning of your movie (do this by 
hiding them on a lower layer), or load 
them gradually in other frames with 
less to download. 


Scrolling text 

Unless you really have to, try and avoid 
using gimmicks such as Java tickers, 
scrolling marquees and scrolling text 
in the status bar. Not all browsers 
support these, and there’s no point 

to them. If you can’t include them on 

a page, why include them at all? 


Future updates 

When designing your layout, keep in 
mind that you'll probably have to 
update it in the future. Leave room in 
your designs for expansion, extra 
buttons, titles and so on. Don't design 
a navigation system that can never be 
altered, or you'll come unstuck later. 


Rollovers 
Create complex image rollovers in your 
navigation using JavaScript. Have a 
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Ten tips for Fireworks 3 


The Button Editor in Fireworks 3 

makes life a lot easier. Start with 
a new, blank document about the size 
you want your button to be, then 
choose Insert>New Button. Create Up, 
Over and Down states using the 
drawing tools, then close the editor. 
You can set export options as normal. 


New buttons are automatically 

added to the Library. This allows 
you to create a ‘generic’ button that 
can be added to your layout as many 
times as necessary. Editing specific 
Instances of the button won't affect 
the others, but changes you make to 
the original will be reflected through- 
out the page. 


You can also add other graphics, 

whether still or animated to the 
Library as Symbols that, again, may be 
reused throughout a document and 
re-edited by returning to the original 
symbol. Select the image you wish to 
add to the Library and choose 
Insert>Convert to Symbol or start with 
a blank document and choose 
Insert>New Symbol. Create the 
Symbol in the Symbol Editor with 
the usual drawing tools. 


) Use as many Layers as you like 
when creating images in 
Fireworks — they make editing easier 
and have no effect on the optimised 
file size of the resulting Web graphic. 


Saving Fireworks images as 

native Dreamweaver Library 
Items (.lbi) makes it easier to update 
images in a Web page. Create an 
image or button as normal, then 
export it with the extension ‘Ibi’ in 
the Library folder of the site you're 


static image on the Default button, 
and have an animated GIF for the 
mouseover state to create a flashy 
rollover. Software like Dreamweaver 
and GoLive can do rollovers for you, 
or you can hand-code them yourself. 


Hit counters 

If you're going to have a hit counter 
on your site, make it a discreet one 
or don't include one at all. It can have 
a bad effect to show people that you 
have only had 249 visitors to your 
site. Use whttp://thecounter.com 

or suchlike, where you can have a 
hidden counter, but log in yourself to 
see how many visitors you've had. 


Background images 
If you’re going to have a background 
image on your site, keep it very simple: 


creating (if it isn't already there, make 
a new folder). When you open the site 
in Dreamweaver, your images will be 
there in the Dreamweaver Library 
ready to slot into the site. 


(6) In cases where you import an 
image from Fireworks 3 into 


Dreamweaver 3, as in the previous 
Library tip, you also import 'metadata’ 
about the file, including the location 
of the original source file. Editing the 
file in Fireworks 3 from Dreamweaver 3 
(choose Edit With Fireworks 3 from the 
context sensitive menu) will 
automatically launch the original 
source file for that image). 


If you import HTML from a 


“rollover or sliced image in 


Fireworks 3 to Dreamweaver 3, edit the 
original source file in Fireworks then 
choose File>Update HTML to update 
the HTML and images in Dreamweaver. 


F If you've got Fireworks 3 but not 
“® Flash you'll pleased to know that 
you can now export Fireworks 
animations in Shockwave Flash format. 


: You can now choose how best to 


optimise your images in 
Fireworks 3 before you export. Use the 
Preview, 2-Up and 4-Up tabs in the 
document window to see how images 
will look with various settings. Use the 
Optimise panel to fine tune export 
options. 


#)) Use the handy new Styles panel 

= introduced in Fireworks 3 to 
store your favourite combinations of 
effects and fills so that you can 
quickly apply them to your images 
without any hassle. 


don’t complicate the background and 
deter visitors from reading the text on 
the site. Keep it subtle and within the 
colour scheme of the rest of the site. 


Entry page 
Many designers use an entry or splash 
page. This is the first page visitors 
see when they go to your site, so you 
should make this page as good as you 
can. Show the technical specifications 
of your site. Which browsers do you 
need? Which plug-ins? 


Scale 

Choosing the correct size for all your 
elements is essential. If you make 
everything too big, it'll look messy on 
smaller screen resolutions. Make 
items too small, and visitors to your 


site won't be able tosee them onbig => 
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Imagemaps 
Instead of having a separate image for 
each link, try using one single image 


for all of the navigation. Define ‘hit’ 
areas as links on the image using the 
<MAP> tag. You can define rectangle, 


designing your site, and look at your 
designs in multiple screen resolutions 


process. You'll be amazed at the 


monitors. Use your judgement when 
variation in how it looks. 


throughout the entire development | 


Generally speaking, using GoLive 

layout grids generates code that’s 
messy and too complex to edit by hand - 
especially if you want it to be read by v3 
browsers. In most cases, using tables for 
layout is the best option. 


One of the best ways to work in 
GoLive is to take a Component- 
based approach... Components are 
reusable chunks of code that you create 
like.any other page, except you set the 
page to be used as a‘Component’ in 
the Page Inspector, then save in the 


Aclean and easy interface makes 
Matinée’s own Website a dream to visit. 


Vector 

Where possible use vector graphics 
instead of bitmaps. Vectors are 
resolution-independent, hence faster 
download times and a cleaner finish. 


Interactive 
Don’t make everything blatant: use 
interactive imagery to present things 
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Ten tips for GoLive 


[:) GoLive automatically generates low 
SRC images for you from the default 
image on-screen. Select your image, 

then check Low in the Inspector. Click 
Generate to create the low-res image. 


Expert tips from... Matinée 


Tips on making sites that trounce the competition, from Matinée - one of the UK’s leading Web design companies... 


Components folder of your GoLive 

site when you're done. They can be as 
simple as a single logo or as complex 

as dynamic, animated GUI. Building 

the Components of a site first, then 
constructing the site by dragging those 
components from the Palette enables 
you to create pages that you can update 
quickly and easily. Updating the original 
Component modifies all the pages that 
contain that Component. 


When creating Components, use 

GoLive layout grids. Although we'd 
usually recommend building your own 
tables, Components are usually relatively 
simple objects with a simple layout. You 
can then drag-and-drop them intoa 
tables-based page. 


When you're creating layouts 
based on invisible tables, wait 
until you've placed all your content 
before you actually make them invisible. 
Setting borders, padding and spacing 
to zero beforehand makes it difficult 
to select individual cells for editing-so 
make life easier for yourself. 


Don’t worry about overlapping 
areas in imagemaps with GoLive. 
The Imagemap Inspector enables you to 


like menus instead of iconic buttons that 
standout and look like other sites. 


Make them stay! 

Don’t give away too much too soon: 
don't fill your first page with all the best 
imagery and features, only to leave the 
other pages bare. Ensure that there’s a 
balance of design and content through 
the site — this way, more people will 
explore and hang around for longer. 


Don’t overdo it 

Don’t over-use creative imagery like 3D 
graphics, as these will take away from 

the site content and make file sizes larger, 
leading to longer download times. Only 
use these to add to the site and help 
deliver that unique message. 


Organisation 
Keep everything organised — when you're 
developing the site on your stage, label all 


specify which hot-spots take precedence 
—no other package does this. 


(7) Using tables with coloured 
backgrounds for headings, columns 
and so on helps to break up the page 
and saves on the use of extra images. 


After creating a new site in GoLive, 

make new folders in the site root 
folder for images, Shockwave files and 
other media. As you collect or create new 
media, place them directly in the correct 
folder. GoLive has its own ideas about 
where content files should go- and 
they're a bit eccentric... Creating your 
own folders in advance bypasses this. 


When you make a new page ina 
GoLive site, it’s placed in a folder 
called New Files. After you’ve made 
all the pages you’re going to need in your 
site, rename this folder to something 
more appropriate, like ‘pages’. GoLive 
automatically cleans up page links. 


© If you want to add a logo or other 
element to your pages, you can 
select it within the page you're on and 
drag it to the Custom tab in the palette. 
Items stored here are available to any 
site you work on. 


your layers and objects. This way, you'll 
be able to find everything easier when 
you put the site together. 


Lowest common denominator 

Think of the user. What browser will 
they be using? What connection speed 
do they have? This affects how well the 
site is received: the smaller the file size, 
the quicker the download, and the more 
enjoyment visitors will have. 


Functionality 

Keep your site as simple as possible to use, 
make everything obvious to the viewer so 
there's no chance they get confused -you 
may only have one chance to impress. 


Test it 

Test your site on a slow machine 

using a basic modem at 28.8k. Most 
designers do their work on the latest and 
fastest machines, but chances are that 


circle and polygon areas on an image 
as hyperlinks. 


Transparent images 

When designing the graphics for your 
site, make sure they have transparent 
backgrounds. GIFs enable you to do 
this, or alternatively to have the exact 
same background colour on the image 
as the colour on the site. This speeds 
up the download time too. 


Designing animation 

When designing animated GIFs for your 
site, keep them to as few frames as 
possible. As yourself, if you really need 
to include that animation on the site. 
Can the same results be achieved 

with a static GIF? 


Building skills 


GIF versus JPEG 

Using the wrong file format for images 
displays them in the incorrect colours, 
and they'll download slower. GIFs are 
ideal for simple images with solid 
colour — like logos and buttons. JPEGs 
are best for photos, and images with 
lots of colour variation and gradients. 


Using frames 
The tip here is not to overdo it. Use 
frames as a place for navigation 


most of your visitors won't be using the 
latest hardware technology. 


About Matinée... 

Matinée is a New Media communications 
company, offering Website and CD-ROM 
design, video production and audio 
services. With 43 employees working 
from its three design and production 
suites, three digital recording studios 
and two Avid editing suites, Matinée is 
able to offer clients complete solutions 
to tackle their everyday communications 
issues. Satisfied Matinée customers 
include Vodafone, Jordan Grand Prix, 
Sara Lee, Chrysalis and Toshiba. 


More on Matinee at W www.matinee.co.uk 

or via @ asomi@matinee.co.uk 

Other URLs by Matinée’s hand include: 

W www.jordangp.com (the Flash version), 

W www.cre.co.uk, W www. firstactive.co.uk, 
W www.jordangp.comfpdesignchallengego, 
W www.mudhut.co.uk, and W www.ffwd.co.uk 


controls and main content. Remove 
the ugly grey borders from frames, as 
they only degrade the design. Use the 
NORESIZE attribute in your frameset to 
stop people resizing the frames. 


Frame targets 

When using frames on your site, don’t 
forget to name them. That way you can 
link to pages and have them load in 
different frames, using TARGET=“main 
frame”, say. Use TARGET=“_blank” to 
open the link in a new browser window. 


Less scrolling 

People hate scrolling down a page to 
find what they’re after. If you have a 
page that’s extremely long, split it into 
a number of pages. Put a link at the 
bottom of each page that goes on to 
the next section: people will be less 
frustrated and better able to find 
information quickly. 


Site maps 

If you have a site that has a ton of 
pages and sub-sections, use a site 
map. This is an index of your site, 
where people can go to find the exact 
page they’re after. The site map page 
should be accessible from anywhere 
on your site for ease of navigation. 


Window width 

Not everyone has a huge monitor. 
Build your site so that it looks good in 
the smallest resolution, 640x480. A 
good tip is to put your content within a 
table, state the width of the table and 
centre it in the window. If you make the 
table about 640 pixels wide, it'll look 
good in all screen resolutions. 


Find it fast 

Your visitors should be able to find the 
information they require as fast as they 
can. The general rule is to get them to 
the required details within about three 
or four clicks. Put your most important 
links on the first page, and use a 
navigation bar to your advantage. 


Browser compatibility 

Aim to get your site working in every 
possible browser to increase your 
target audience. Find out which 
JavaScript commands work on which 
browser. Some HTML tags are different 
depending on the browser. Try to stick 
to well-supported tags, and your site 
should work with every browser. 


Using images 

When inserting images into your site, 
don’t forget to use your HEIGHT and 
WIDTH tags. This makes the site 
download faster, as it won’t have to 


(2) If you're still using QuickTime 3, 
upgrade to version 4. For $30 you 
can grab the Pro version, capable of 


screen playback. Improvements include 
MPEG1 support and streaming live video. 
It was recently announced that MPEG4 
would be based around the QT format. 


You can make different movies for 

users of ISDN, 56k or 28k modems... 
MakeRefMovie, an application for use 
with QuickTime 3, enables you to output 
movies at different streaming rates, then 
embed them into your pages with just 
one link. Go to w www.apple.com/ 
quicktime/developers/tools.html to 
download it and other QuickTime 
add-ons. QuickTime 4 has this capability 
built in to the technology. 


If you're using QuickTime sound 

to autoplay an audio file, you can 
use the value HIDDEN to stop the plug-in 
from appearing on-screen. Just place it 
within the <EMBED SRC> tag. 


The property HREF with a URL 
turns your QuickTime movie into 


Ten tips for QuickTime 


editing around 35 media formats and full 
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a hyperlink. However, you don’t need to 
use the standard HTML <A HREF></A> 
linking syntax. 


QuickTime 4 has two streaming 

modes: Progressive Download and 
True Streaming. Use the former when 
creating files for embedding in standard 
Web pages. True Streaming is best for 
dedicated video delivery —like live events. 


Generally speaking, the better 

quality the source material, the 
better the results. With digital video, 
lighting is very important. Low levels of 
light can lead to grainy looking results 
lacking in detail when converting to 
QuickTime format. 


By the same token, the less 

detail there in a scene, the better 
it will compress. So try to use plain 
backgrounds and keep extraneous 
movement toa minimum. 


Macromedia Flash now exports in 

QuickTime format. It’s a lousy use 
of resources for Flash animation alone. 
Conversely, QuickTime 4's support for 


Five tips for audio 


Download the RealPlayer G2 Producer 
from W www.real.com - and see tip 3. 


@ If you embed short sounds which 
you intend to autoplay (using the 
<EMBED> tag), use Windows WAV format. 
Most machines on the Web are running 


reformat the text. Also, include the 
ALT attribute on an image to display 
a description of the image. 


<META> tags 

When you’re creating your Website, 
don’t forget to include <META> tags in 
the <HEAD> of you site. Search 
engines use <META> tags to retrieve 
keywords and descriptions from your 
site. They can improve your search 
engine ranking. 


Windows, while QuickTime handles 
the WAV format on Macs. 


(2) Like image files, try to keep 
autoplaying WAV file sizes down. 
You can do this by reducing the quality 
of the file to around 11KHz. If you start 
with a good source file (16-bits, 44- 
48KHz), you shouldn't hear too much 
degradation in your sound quality. 


Larger files, anything over 20-30 
seconds, should be converted 
into a format with more aggressive 
compression — like MPEG3 or RealAudio 
G2. The latest RealAudio Jukebox plays 
back both formats, while the free 
RealAudio G2 Producer encodes 


Pointless sounds 

If you’re going to use sound on your 
site, make sure you’re using it for a 
good reason. The funny noise that 
plays on your buttons is only amusing 
for the first couple of times. Pointless 
sounds will only become annoying and 
deter your visitors. 


Standard fonts 
Not every machine has the same fonts 
as you. Make your text readable by 
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Flash is great for adding titles and effects 
to full motion video. 


(2) The QuickTime 4 plug-in enables 
you to reload a new movie in place 
of the default movie — using HREF to 
specify the second movie, and TARGET to 
point back to the original file. This can be 
used to place single-frame thumbnails in 
a page, which, when clicked, download 
and play another movie. 


Go to w www.apple.com/ 

quicktime/authoring/embed.html 
for a full list of the optional tags you 
can use to control QuickTime content, 
and how to use them. 


QuickTime 4 Pro enables you to edit and 
convert files in a variety of compressed 
media formats, including QuickTime VR. 


RealAudio and RealVideo. Both can be 
downloaded from w www.real.com 


ge Flash 4 and Shockwave 7 now 

“® support MPEG3. As more machines 
are likely to have Shockwave than an 
MPEG player, it makes sense to embed 
streaming sound files into a Shockwave 
Flash player. This can be as simple as a 
single button designed to trigger the 
playback of an external MP3 file. 


™) RealAudio is best for preview 
‘ content —a streaming alternative 
to MP3. Though you can encode varying 
qualities of RealAudio from a single file, 
MP3 should still be your choice when 
distributing CD quality files. 


using a standard font that everyone 
will have installed on their computer. 


Helvetica and Geneva on Macs, and 
Times on both. 


What’s the point? 

If something you put on the site isn’t 
really needed, why include it? Useless 
items are frustrating to your visitors. 
Avoid things like animated envelopes 
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Arial and Verdana are standard on PCs, 


for an e-mail link and rotating 3D logos. > 
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Expert tips from... Amaze 


only be found by asingle route, and 
cross-references simply confuse. Start 
with an overall ‘network’ structure that 
provides many possible routes to all your 
different items. 


centric interface design. Amaze designs 
and builds for the Web, Intranet, CD- 
ROM, digital television, interactive video- 
on-demand, interactive television and 
consumer electronics. Its digital media 
solutions add value to business. 

Established in 1995 to explore new 
ways of learning and communication 
offered by digital media forms, Amaze 
focuses on the development of new 
tools and technologies. 

The Amaze approach involves 
working closely with clients to ensure 
a fundamental understanding of their 
core business, brand, strategy and 
customer base. Amaze’s approach has 
won it a diverse client base including 
government and public sector bodies, 
blue-chip retail and service corporations 
and broadcasting companies. 

Amaze develops solutions with an 
understanding of the entire framework 
within which the solution will sit, 
establishing close and long-lasting 
relationships with clients. 


Navigation choices 

Try to keep the number of local 
navigation choices between five and 
nine. From a psychological standpoint, 
this is enough to suggest variety and 
not so many as to cause confusion. 


Embedded URLs 

Embedding URLs into paragraphs of 
text invites your reader to leave the 
page before they've finished digesting 
what's on it. Put them at the bottom 
of the section, or in a sidebar. 


Amaze shares expertise on structure, 
navigation and easy browsing... 


Structure 

Never assume that a company’s 
organisational structure is a good 
basis for a Website — it’s usually the 
one that will make the least sense 
from a browser's point of view. 


Keep close 

Try to design a site's structure in such 

a way as to ensure that no main section 
is more than four clicks away from your 
home page. 


For more info, see Amaze’s own Website, 
at W www.amaze.co.uk 

Expertise supplied by Roy Stringer, 
Chief Hypermedia Architect at Amaze. 


About Amaze... 
Amaze is recognised internationally for 
its groundbreaking navigation and user- 


Hierarchy 
Avoid structuring a site on the basis of 
a hierarchy. Each item in a hierarchy can 


Five tips for JavaScript 


MB) 'f you learn to build your own 

~ rollovers from scratch, you're 
well on your way to learning all the 
fundamentals of JavaScript. To begin 
with, JavaScript from 1.2 onwards 
recognises several document objects. 
For example, images are recognised as 
objects when referred to by a name. This 
means you don't have to mess around 
much when swapping images — you just 
attach an action to the name of an image 


The problem with this script is 

that the second image doesn't 
load until the mouse is moved over the 
original — causing a pause. 

There are two ways to overcome this. 
The first quick and dirty method doesn’t 
involve JavaScript. Simply place this line 
before your rollover: 


<SCRIPT LANGUAGE=javascript> 
Next, we create the array and give ita 
name and specify the number of ‘slots’: 


var rollover = new Array(2) 


Then we fill the slots by declaring images 
and defining a source file for each: 


rollover[o]= new Image() 


<IMG SRC="“button2.gif” WIDTH="o rollover[o].stc = “buttom.gif” 


document.imgbutton.src = rollover[1].src; 
return true; 


} 


function changeBack() { 
document.imgbutton.src = rollover[o].src; 
return true; 


} 


The code for each function is actually 
quite simple — first the name of the 


Using layers 

The latest design tools enable you to 
create layers to position elements on a 
page exactly where you want them. The 
problem with layers is that they can 

not be seen on older browsers. To get 
around this, convert layers into tables 
using something like Dreamweaver. 


Cache is king 

When a browser downloads a file, it’s 
stored on your hard drive in a cache. 
Any files stored there won't have to 
be downloaded again. Use the same 
buttons, logos and icons throughout 
your site so that they’re stored in the 
cache, and it further decreases the 
download time of your site. 


Text links 

Where you have an image on the 

site as a link, try and provide a text 
alternative. Not everyone is looking at 
the site using a browser that supports 
images. You can have the text links at 
the bottom of the page in a small font 
— as long as they're there. 


Use a template 

When you create the first page for your 
site, turn it into a template. You can 
then use the template to construct the 


and define the source of the image. In 
fact, you don’t even have to declare or 
create any script functions. Your first 
ever JavaScript could be as simple as this: 


<A HREF="“index.html” 
onMouseOver=“imgbutton.src=‘button2. 
gif”’onMouseOut="“imgbutton.src=‘butto 
nigif”> 

<IMG SRC="button1.gif” 
NAME="“imgbutton” ></A> 


This script, embedded in an HTML 
hyperlink, refers to an image object 
named ‘imgbutton’, which is defined 

in the last line. In English it says:“When 
the mouse is over the image object 
called ‘imgbutton’, change its source to 
button2.gif. When the mouse is moved 
out, change it back to button1.gif.” But 
we've not quite done yet... 
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HEIGHT=“o"> 


This line loads the image in invisibly 
before the rollover, so that when the user 
moves their mouse over, the file is already 
in their Web cache. 


) The clean way to do this is to create 
“an array in JavaScript to pre-load the 
image first. Think of an array as a being 
like a series of boxes. If we were to ask you 
to put an object in the third box along, 
you'd know exactly what we were talking 
about. You'd understand too, if we asked 
you to take an object from a specific box. 
Before we can tell the script which images 
to pre-load, we have to ‘make the boxes’ 
to put them in by defining an array. 
We do this by first making a script 
declaration between the <HEAD> tags 
at the top of our HTML file: 


rollover[1]= new Image() 
rollover[i].stc = “button2.gif” 


That's how we pre-load images — to get 
them to replace one another, we have to 
write a function... 


A function is a list of instructions 

with a unique identifier. When you 
want to execute that list of instructions, 
instead of typing out the list again, you 
refer to the function by name. This is an 
important part of JavaScript, because 
once you can create functions, you are 
creating reusable code — code that is 
‘object-oriented’— and that’s what 
JavaScript is all about. Here we're 
creating two functions, one that changes 
the image when we move the mouse over 
the button, and one that changes it back. 


function change() { 


function is declared, then the action that 
takes place. Finally we complete the script 
with an HTML sign-off tag: 


</SCRIPT> 


Calling the functions is relatively 
easy. We refer to them directly 
within the hyperlink for our rollover: 


<A HREF=“index.htm|” 
onMouseover=“change()”onMouseout= 
“changeBack()”><IMG SRC=“buttoni.gif” 
NAME="“imgbutton”></A> 


This script could easily be expanded 

so that the image references for the 
functions ‘change’ and ‘changeBack’ are 
variable, dependant upon which named 
button they refer to— meaning the same 
functions can be reapplied to multiple 
buttons. And there it is. 


very similar to Web design, in terms of 


rest of your site with a similar colour 
scheme and layout. Create empty 
tables and blank headers, and you'll 
find inserting items for each page a 
great deal easier. 


Graphics optimisation 

To make images download faster, 
use as little colour as possible. Anti- 
aliasing adds more colours to an 
image and increases download time. 
For JPEGs, use an optimisation tool 
such as Fireworks or JPEG Optimiser. 


Compatibility testing 

Once you've built your site, test it. 
Check the layout in every screen 
resolution, and check everything works 
the same in each different browser. 
Also, don’t forget to check that there 
are no dead links. Every site you do 
should be checked very carefully. 


Tested on humans 

A great way to test the usability of a 
site is on people. Get someone who’s 
fairly new to the Internet to look at your 
site and watch to see how they move 
around it. You'll be able to see what 
works and how things can be changed 
to make things easier for your visitors. 


Site maintenance 


Search engines 

Once your site is on-line, register 
your site with the search engines on 
a regular basis. Play around with your 
<META> tags to see which results get 
you to the top of the search engine 
listings. Tweak them to get best 
results, and watch to see how many 
new visitors you get to your site. 


Five tips for databases 


NetObjects Fusion, ideal for database sites. 


C) Database design is not as difficult 
“® asit might at first seem. In fact, it’s 


planning and layout. You still have to start 


with a pencil and a piece of paper to 
sketch out the flow of information so 
you can decide which fields for data entry 
you need. Chances are that, as aWeb 
designer, you won't get this luxury 
though - your job in most cases will be 

to build a Web front-end on top of an 
existing database. 


ge) Get yourself a reference book about 
‘ SOL- pronounced ‘squirrel’ and 
standing for Structured Query Language. 
SQL is the universal language for 
communicating with databases. Most 
coding related to retrieving information 
from databases via the Internet is a 
combination of HTML forms and scraps 
of SQL code. 
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®) You can experiment with the most 
modest of set-ups. Microsoft 

Internet Information Server is compatible 
with Microsoft's Active Server Protocol 
and ODBC (Open Database Connectivity). 
If you've got a copy of just about any 
database application around, you should 
be able to use that to serve database- 
driven pages. 


Dreamweaver and GoLive are great 

for Web design. Once you start 
getting into building sites which are 
database-driven, NetObjects Fusion offers 
a better toolset — but you might only want 
to use it at the last stage of building. This 
might seem like overkill (and an 
unnecessary expense considering that 


they all have layout capabilities), but 
Dreamweaver and GoLive are more 
flexible for page design. 


gfe Youcan use third-party programs 
®# like Allaire’s Cold Fusion to bridge 
the communication gap between Web 
and database. These offer a drag-and- 
drop environment that makes it easier 
to develop Web applications — but you'll 
get little change out of a thousand quid 
after buying even the personal editions 
of such tools. Pervasive Software, on 

the other hand, is giving away its Web 
application building program Tango for 
free... It hopes to recoup the investment 
through training. Order a copy from 
Wwww.pervasive.com 


Ten tips for Director and Shockwave 


@m) Shocked fonts in Director 7 save 
. space in files — but you don’t need 
to embed the entire font to get the 
results you're after. Go to Insert>Media 
Element>Font and select your chosen 
typeface from the drop-down. Select the 
bottom radio button and type in the 
specific characters used in your movie. 
When you click OK, the font appears as 
acast member — any text using that font 
face will now appear correctly on any 
user's system. 


3 SWA - Shockwave Audio —is 
MPEG3. If you need to embed this 

into your Web page quickly, convert 

WAV files to SWA in Director 7 using the 

‘Convert WAV to SWA Xtra-then rename 

the extension to MP3. 


Shockwave 7 is different to earlier 

versions, in that it installs itself to 
a machine at system level. You can make 
sure that users have the right version 
on the their machine by selecting ‘Web 
download if needed’ when you finally 
export the file. 


(4) You can coax Shockwave movies 
into auto-resizing to their 
environment with a bit of HTML 

and Lingo. First, place a single pixel, 


File organisation 

When organising the files on your site, 
keep the files in separate folders. That 
way, the site is easier to update. Have 
separate folders for images, HTML 
files, video, sound and CGI scripts. 
Have obvious folder names too: so, 
any files relating to the Jobs section, 
put them in a folder called Jobs. 


transparent GIF at the top of your page. 
Set its width to 100 per cent and height 
to 1. Below that, embed your Shockwave 
movie, giving it the name ‘mymovie’. In 
the movie, add this script as handler: 


on whatSize 
externalEvent(“parent.document.mymo 
vie.EvalScript(document.images[o].widt 
h);”) 

end 


on EvalScript x 
alert “Window Width is:” && value(x) 
end 


Use an OnLoad event to trigger 
‘whatSize’, and your movie will resize 
to fit the browser window. 


Make sure you remove unused 

cast members before Shocking a 
Director file — they add to the final file 
size and download time. The same goes 
for unused handlers, behaviours, sounds 
and score scripts. 


r You can create a background from 

tiled images in Director, just as you 
can in HTML. Create a tile and load it as 
a Cast Member. Click the pattern chip 
in the Paint window and choose Tile 


Uploading 

When you're uploading files from your 
site, don’t forget that you need to 
upload them in the correct file 
format. HTML and text files should 
be uploaded in ASCII format, while 
images, CGI scripts, Flash files, 
sounds and video should all be 
uploaded in the Binary format. 


Setting from the pop-up. Click on Cast 
Member as the source, then click back 
on the Cast Member. Finally, use the 
height and width controls to fine-tune 
the patterns tessellation. 


# Using the Lingo commands 
associated with the object 
‘netThing’ (preloadNetThing, 
getNetThing and so on), you can change 
the content of a Shockwave movie 
without re-doing the movie. Simply use 
an external URL and change the content. 


4 Avoid using bitmaps if possible — 
y especially if you can take advantage 
of Director 7's vector capabilities. 


ZF Let users know that you've got 

= Shockwave content in your site 
before you use it. Give them the 
opportunity to download the plug-in 

if necessary. Pages look ‘broken’ when 
displaying content that’s not supported 
by the users set-up. 


py, Used well, Director 7's streaming 
¥ behaviours help you to develop 
more complex Shockwave for the Web. 
Users will forgive larger file sizes if the 
download is in the background while 
there’s something happening on-screen. 


Site updates 

To keep visitors coming back to your 

site, update it as often as you can, 

either on a regular daily, weekly or 
monthly basis. Keeping visitors coming 
back to your site is one of the hardest 
things to do. They will only come back 

if they know that the site has been 
updated since they last visited. > 
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A clean and healthy site looks better... 


B) As you're updating your Website, 
= youneed to keep a close eye on its 
structure. Keep a diagram of the 
structure, adding new pages and 
removing obsolete ones as you go. That 
way you can keep track of the changes 
and how each of them affect your 
structure. 


% Set aside a time each week to 

™® = clear old files out. If you don't, 
they'll mount up until you have a huge 
job on your hands. Make sure you 
remove images too, without taking out 
images that are used on other pages. 


You need to check external links 
“from your site regularly. Draw up 
a checklist of these and check them 
weekly. That way you won't be caught 
out when an external site changes. 


Create a full screen Flash site 

First, this only works in Internet Explorer 
ona PC, and best in version 4 

or 5. There’s relatively little magic in this — 
it’s just a JavaScript window command 
specifically for /E, called ‘fullscreen=yes’. 
But there’s a little more to consider before 
you just plonk code lines in all over the 
place. What about the incompatible 
browsers? We need to weed them out 

to ensure a seamless experience for all 
site visitors, regardless of any incumbent 
hardware or software handicaps. 


User testing 
So when you hit our Switch page, first we 
check out your set-up. 


User redirecting 

This happens quickly and the 

result is that Mac , /E3 and Netscape 

users are redirected to a browser-based 
site; however, if you have the technology, 
you get slammed into our bells'n’whistles 
full-screen site mode. 


Here’s the code: 

<!DOCTYPE HTML PUBLIC “-//IETF//DTD 
HTML//EN”> 

<HTML><HEAD> 


Tips for site maintenance 
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@} Craw up alist of everything in 
~ your site that holds information 
that needs a regular update. There’s 
nothing worse than a site that’s out of 
date — make alist, and you can make 
sure your site is kept bang up-to-date. 


Over time, your audience's 
browsers and machines will 
become more sophisticated. You need 
to plan for a review and major overhaul 
of your site at least once every two 
years to bring it up to date with the 
development of browsers. 


#%) Carry out regular checks on the 

speed and accessibility of your 
server, by accessing your Website at 
different times of the day and week. 
That way, you'll be aware if your server's 
traffic becomes too much for it to deal 
with, and you can then take steps to fix 
the problem. 


) When you launch your site, you'll 
: have registered it with search 
engines. Every month or so, you need 
to check your site’s position within the 
various search engines to see if it’s 
appearing regularly, and if necessary 
adjust your <META> tags to make them 
work as efficiently as possible. 


Expert tips from... Spooky and the Bandit 


<TITLE>spooky fullscreen setup</TITLE> 
</HEAD> 

<SCRIPT LANGUAGE="“Javascript”> 
<l--// 


function intro() 


{ 
if 


((navigator.appVersion.indexOf(“Mac”)!=- 


1) && 
(navigator.userAgent.indexOf(“MSIE”)!=- 
1)&& 
(parselnt(navigator.appVersion)==4)) 

{ 

skip() 

} 


else 
{ 
ete 


} 
function skip() 


{ 


location.href=“browser.htm|”; 


} 
function popup() 
{ 


var vHeight; 
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File names 

When you're naming the files for your 
site, stick to what’s known as 8.3 

file names. Some people may still be 
looking at your site on older machines. 
Use the *.htm ending, rather than 

* html — new.htm for instance. You 
want as many people as possible to 
see your site, so don’t exclude those 
who can't see long file names. 


Your domain name 

An important consideration is your 
site’s domain name. If your Website is 
meant to appeal to consumers you 
should definitely spend some time 
thinking up a good URL. Unfortunately, 
most of the catchiest domain names 
are gone. w www.netsolutions.com 


Backing up 

Whatever you do, be sure to backup 
your Website. Put your site on to a Zip 
disk or CD and then store it away in a 
safe place. If the worst comes to the 
worst and you lose everything, at least 
you have a backup ready to upload the 
site again. 


Site statistics 

If you can have the facility for 
displaying statistics from your site, 
then do so — it helps promote the site. 
Look at how many visitors you have, 


version = 
parseFloat(navigator.appVersion.substrin 
g(navigator.appVersion.indexOf(‘’)- 
1,navigator.appVersion.length)); 

if (version >= 4) 

{ 

var avHeight = parselnt(screen.height); 
var avWidth = parselnt(screen.width); 

if (navigator.appName==“Netscape”) 


location.href=“browser.htm|”; 


if (navigator.appName==“Microsoft 
Internet Explorer”) 


window.open(“fullscreen.html”,“screen”, 
“toolbar=no,location=no,directories=no,s 
tatus=no,scrollbars=no,menubar=no,resi 
zable=no,fullscreen=yes,width=100%,hei 
ght=100%”); 
location.href=“browser.html”; 

} 

} 


And what happens to other browser types 
that may not fall into these categories? 
They fall into the ‘Others’ category, and 
are sent to the same HREF call as before. 
This is the same site that /E3 PC users are 
directed to: 


which browsers 
they use, what screen 
resolution they run in and how they 
found your site. 


Error checking 

Go back to your site on a regular basis 
to check if everything is working. Look 
at all of the images: are they loading 
properly? Check all your external links 
to see if the sites you link to are still 
actually there. There’s nothing worse 
than visiting a site to find that it 
doesn’t work. 


Constant improvement 

And finally — just keep tweaking your 
Website. As your new design skills 
improve, apply them to your 
masterpiece. Use something like the 
Website Garage which will test your 
Website and tell you how to improve it. 
If you find a new way of doing 
something that makes download times 
faster, don’t think about it — just go 
ahead and make the changes. EEE 


Expertise supplied by: Chameleon Consultants, 
@ susannah@dial.pipex.com, Karl Hodge, 

@ khodge@dial.pipex.com, and Headstate, 

@ chris@headstate.co.uk. Flash 4 costs £259, 
Director 7 is £1110, Dreamweaver 3 costs £299, 
Fireworks 3 costs £179 (see page 97). Contact 
Computers Unlimited on t 020 8358 5857. 
ImageReady is part of Photoshop 5.5 which 
costs £529 — call Adobe on t 020 8606 4000. 


else 


{ 


location.href="browser.html”; 


} 


} 

//--> 

</SCRIPT> 

<BODY BGCOLOR=“#o000000” 
onLoad="intro()”></BODY></HTML> 


Implementing the code 

We're left with the /Eg and 5 users, and 
we can start the whole full-screen show! 
Ww www-spookyandthebandit.com 


About Spooky and the Bandit... 
Spooky and the Bandit is the specialist 
Flash team of Think New Ideas. The 

Flash team creates effective multimedia 
interactive solutions using this 
bandwidth-friendly vector technology. 
Combined with Macromedia’s Generator 
product, the team is able to build 
complex dynamic sites using underlying 
databases, but with an intuitive and 

fun front-end. 


W www.spookyandthebandit.com or e-mail 
@ info@spookyandthebandit.com 
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Welcome to NetObjects Online. Feel free to move around. 
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Instantly add forms, FAQ s, 
sshopplng a and other pre, 


a 


NetObjects. batons 5.0 


GET THE LATEST VERSION OF FUSION AND JOIN THE E-COMMERCE RE\ OLUTION... 


lexibility and power are the key when it 
comes to version 5 of Fusion by 
NetObjects. Already known for its prowess 
f as an e-commerce site set-up tool, with 
Fusion 5.0, NetObjects has chosen to beef up the 
program's site design tools. The program's an ideal 
application for creating effective sites that do the 
business. 
If you've tried NetObjects Fusion 2.0 on our cover 
CD you'll already have tasted a bit of that power and 
flexibility. Fusion 5.0 offers a seamless drag-and-drop 
design environment, along with Wizards to guide you 
through some of the trickier procedures like 


dynamically connecting to application servers and 
databases. Users can easily import Shockwave, Java 
and other Web technologies, as well as HTML 
authored in other applications, and although there's a 
WYSIWYG working environment you can also dip into 
your code via the built-in HTML source editor. 

On the design side, the SiteStructure Editor is a 
fast and easy way to design your overall site using a 
convenient drag-and-drop interface. Fusion creates 
the links and navigation, leaving you to concentrate 
on the content. Over 50 SiteStyle templates are 
available if required, and adding pull-down menus and 
rollovers is no problem at all. Cascading Style Sheets 


Get this slick 


t 0238 0817700 


can be set up to ensure consistent typographic styles 
across your sites. 

Despite all that design power, NetObjects hasn't 
toned down Fusion's e-commerce capabilities one bit. 
This program is renowned as one of the easiest ways 
of implementing an on-line product catalogue, 
complete with shopping cart and transaction 
processing. And if e-commerce boggles your mind, 
worry not: NetObjects offers support with an on-line 
guide on how to accomplish your goals... EEE 


Phone € 0238 081 7700 or visit W www.netobjects.com for more 
information on Fusion 5.0. Offer closes 30th April 2000. 


(ex VAT and delivery) 
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The definitive guide to Web design * Mac & PC 


caso7 


y SHES 


Our comprehensive directory of design resources available on the Web 


NEED SOME STYLISH FONTS FOR YOUR WEBSITE, OR WANT TO KNOW MORE ABOUT SEARCH ENGINES? READ 
OUR ESSENTIAL GUIDE TO THE BEST WEB RESOURCES. FROM GRAPHICS TO MULTIMEDIA, IT’S ALL HERE... 


Useful resources 


Macromedia 

W www.macromedia.com 

Not only has it distributed more than 
200,000,000 Shockwave Flash 
players, but Macromedia has also 
become the standard-bearer for Web 
design, with its Dreamweaver and 
Fireworks packages. Its home page 
features lots of downloads, links to 
great sites which have made the most 
of Macromedia products, and page 
upon page of tips and techniques to 
help you create a site people will return 
to again and again. 


Tips and Tricks 

W www.tips-tricks.com 

CGI, DHTML, frames, tables... when it 
comes to Web design, there are an 
awful lot of acronyms and jargon to get 
your head round, so a trip to Tips and 


Tricks might be worthwhile. It never 
assumes you're a Web genius, so if 
you don't know .the difference between 
JPEGs and GIFs, or want to learn more 
about Web-safe colours, this is the 
place to come. JavaScripts and Applets 
are explained too, but if you're still in 
the dark there's a discussion board 
where you can post that burning 
question that’s keeping you awake. 


CNET Builder 


w www.builder.com 

If you're serious about creating a 
successful site then it's time to call in 
the Builder. This constantly-updated 
site is rammed with resources, cool 
tools, software recommendations, tips 
and techniques. You can discover what 
to look for in Web hosts, there's design 
advice from the professionals, and if 
you're particularly proud of your on-line 
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macromedia 
add life to the web 


What happens when 
you add life to your 
Web site? Check out 
how these leading 


Macromedia 
products, 
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Macromedia is the leading player in the Web design game, due to packages such as 
Fireworks and Dreamweaver, not to mention its rather popular Shockwave Flash gizmo. 
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creation, you can submit your site to 
obtain a critique from Web experts. 


Web Review 

W www.webreview.com 

Web Review is yet another great 
collection of tutorials, advice and 
resources. It's particularly strong on 
multimedia, so if you're planning on 
incorporating sound and vision into 
your site, take a look here, and 
discover how to add digital video or 
Shockwave animations to your site, or 
learn about the pros and cons of 
different ways to play sound, like 
QuickTime and Windows Media Player. 


Page Resource 

W www.pageresource.com 

If you're new to HTML, this site serves 
as a good grounding to its manifold 
mysteries. Even if you're an 
accomplished Webmeister, it's still 
worth a visit, as you can discover how 
to make your site load faster and make 
people return again and again. There's 
also loads of tutorials on JavaScript, 
CGI/Perl and DHTML, plus background 
stuff on the principles of Web design. 


Microsoft Web Workshop 


w http://msdn.microsoft.com/workshop 
The folk at Microsoft have not only 
been hard at work at developing the 
Internet Explorer browser, but they've 
also put together a whole batch of 
features covering all aspects of Web 
design. There’s lots of useful stuff 
here, with information on design, 
languages, security, streaming media, 
interactivity and more. 


Web Utilities 


W www.webutilities.com 
Billing itself as The Ultimate On-line 
Web Community, this site features 


tons of free stuff — software, tutorials, 
images, GIF animations — the whole 
nine yards. It's particularly good if 
you're looking for fonts to jazz up your 
site, with hundreds of different styles 
to download for free, backed up by 
advice on how to select the right one. 


Really Big 

W www.reallybig.com 

Like the name suggests, this is a 
positively massive compendium of Web 
building resources, featuring free 
clipart, CGI, counters, fonts, HTML, 
Java, animation, backgrounds, icons, 
WYSIWYG editors, buttons, 
photographs, site promotion, tutorials 
and more. And if you're looking for a 
host, you can search what they 
describe as the biggest Web hosting 
directory on the Net. 


Big Nose Bird 

W http://bignosebird.com 

Here's an impressive collection of 
dazzling scripts and tools to give your 
Website a really professional touch. If 
you want to set up e-mail forms, 
mailing lists, virtual postcards, 
surveys or search engines, this should 
be your first destination. There's loads 
of tutorials too, with cut and paste 
code you can use to make your site 
perform all sorts of wonderful tricks. 


Webmaster Central 

WwW www.wmcentral.com 

Once you've designed your site, and 
it's up and running, how will you make 
sure that it stays fresh and keeps up 
with changes in the world of on-line 
design? Well, you can check out 
Webmaster Central, which features all 
the essential news for wired 
Webmasters, tons on tips and 
resources on design, promotion and 
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Heavenly inspiration for users of Adobe’s 
popular Web authoring software package 
can be found at GoLive Heaven. 


hosting, plus useful advice on building 
a career as a Webmaster. 


GoLive Heaven 

W www.goliveheaven.com 

There are several Websites for users of 
Adobe's popular Web authoring 
software, but GoLive Heaven is 
probably the most attractive and 
easiest to use. It packs in the latest 
news from the GoLive community, 
along with tips, techniques and 
troubleshooting, with the prospect of 
JavaScript tutorials to come pretty 
soon. If you're on the ‘cutting edge’ of 
Web creation, it's a heavenly sight. 


WebMonkey 

w www.hotwired.com/webmonkey 
Don't fear the monkey — he is your 
friend. If you take a trip to the home of 
your simian cyberchum, you'll discover 
a cache of easy-to-follow tutorials. 
Whether you're still getting to grips 
with HTML, are looking to expand your 
Flash skills, need to brush up on 
stylesheets or want to create an on- 
line store, the knowledge you need is 
here, along with features, essential 
tips and reviews. 


Freebiescenter 

W www.freebiescenter.com 

Loads more useful freebies you can 
use to give your site that professional 
sheen. Free Web space, e-mail, 
guestbooks, HTML tutorials, mailing 
lists, messageboards, banner 
exchanges, scripts, chatrooms, hosted 
CGI, easy-to-remember URLs, 
counters, trackers — even how to get 
your site sponsored. Just about 
everything you could possibly need is 
right here. 


Graphics and design 


Realm Graphics 


It’s a monkey! Looking very technical! 
He’s got lots of tips, tricks and tutorials 
to share - but no bananas. 


bullets, buttons, icons, lines and 
design sets you can purloin for your 
own Website, or you could use them as 
inspiration when designing your own. 
You can see how all the different 
textures will look like on a page with 
the nifty texture view feature. 


image Mechanic 

W www.imagemechanic.com 

Image Mechanic enables you to 
manipulate your images using 
professional-quality graphics tools 
without having to download anything on 
to your computer, and it's free. Great if 
you want to apply a particular effect 
just once, or you're in a hurry. Just 
upload your image, then you can trim 
the fat from your Web images and 
make them load faster, resize GIF 
animations, add realistic snow, rain or 
fire, plus lots of other cool effects. 


Hoteye 

W www.hoteye.com.au 

Based in Australia, this site houses a 
multitude of graphic delights. There's 
free graphics to download, including 
some splendid animated GIFs, a 
gallery, profiles of prominent digital 
and Web artists and an exhaustive list 


Hoteye plays host to an array of dazzling 
graphic delights, including a gallery and 
animated GIFs to download. 


of links to inspirational Websites. 
Hoteye is one of the best designed 
sites featured in this directory, it's a 
really worthwhile visit. Go see! 


Andy Art 


W www.andyart.com 

There aren't many sites as packed with 
free images, buttons, GIFs, tips and 
links as Andy's Art. There are loads of 
useful and simple-to-follow tutorials, 
covering topics such as adding sound 
to your Website, FTP, creating 
QuickTime movies among others, while 
if you're baffled by those mysterious 
HTML tags, Andy will explain all. You 
can also search through 28,000 
royalty-free images, so this is definitely 
one to bookmark. 


Creative Pro 

W www.creativepro.com 

Seeing as you're a creative type, 
you've probably already cast an eye 
over this aladdin's cave of design 
resources, but have you checked out 
the Web Publishing section? It features 
links to loads of essential shareware, 
software reviews, features and tips, as 
well as useful gizmos like a slinky 
colour converter, for converting RGB 


Free stuff is crammed into just about 
every corner of Andy Art, including 
buttons, images, GIFs and tutorials. 


values to their hexadecimal 
equivalents to specify the right colours 
for your Website. 


Cool Graphics 

W www.coolgraphics.com 

Not only is this one of the largest free 
graphics archives on the Web, 
featuring thousands of cool graphics 
sorted into categories, but it's also 
home to a competition searching for 
the best new Websites, so if you're 
proud of your on-line creation, be sure 
to enter — the competition is fierce, 
however. There's also an excellent day- 
by-day guide to creating a great site in 
a week, news for Webmasters, and a 
bibiography of useful graphics books. 


Animation Factory 

Ww www.animfactory.com 

The dedicated team at the Animation 
Factory have been busy churning out 
over 12,000 free original GIF 
animations, rendered in 3D for you to 
embellish your Website with minimal 
effort. From animated text, dividers 
and buttons, to more superfluous GIFs 
like dancing cheerleaders and blinking 
alien eyes, this features just about 
every GIF you could ever need, and 


Sound and vision... Bring your site alive with the best multimedia 


Real Networks 


Ww www.real.com 
Despite the remorseless rise of MP3, 
RealPlayer remains a popular format for 


on-line entertainment, and it allows you 


to incorporate streaming media into 
your Website. Come here to get your 
hands on RealProducer-—the software 
needed to turn your audio and video 
into Real files. It's free, although as with 
all Real products, you'll need your your 


credit card to get the top quality version. 


Shockwave 


w www.shockwave.com 


W www.ender-design.com/rg/ 
Billed as the One Stop Shop for Web 
images, Realm Graphics features 
hundreds of backgrounds, textures, 


If you've taken a closer look at any of the 
splash screens featured in our dazzling 
round-up on page six, you'll have seen 


that they all use Shockwave Flash. It's 
become the standard format for 
multimedia content on the Web, 
because Flash movies are quick to 
download and because they use vector 
graphics, they're scalable. Macromedia's 
Shockwave site features all the software 
plus a guide to creating your own Flash 
content. 


QuickTime 

w www.quicktime.com 

Now into its fourth incarnation, Apple's 
QuickTime format is one of the most 
popular on-line media formats — it's the 
one most movie sites use to trail clips 
from blockbusters like The Phantom 
Menace, while the QuickTime player now 


lets you view streaming content from 
MTV, CNN, BBC and more. This site 
features everything you need to start 
creating QuickTime files, including 
sample code, tools, utilities and tutorials. 


eS es 


TOONMAKER 


Goin’ down to South Park with the great 
Toonmaker at the Shockwave site. 
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some which could become very 
irritating. It's up to you. 


Spinwave 

W www.spinwave.com 

Smaller is faster, says Spinwave, 
which promises the finest image 
compression tools in the universe. 
There's a GIF Cruncher and a JPEG 
Cruncher — as the name suggests, you 
specify an image to be compressed, 
and the program ‘crunches’ the file 
size to rapidly shrink download times. 
You can crunch as many times as you 
like for free, but if you like, you can pay 
for a batch crunch option. 


Reptile ce 

W www.sausage.com/reptile/ 

Reptile is a smart free application that 
enables you to create funky 
backgrounds for your site, limited only 
by your creativity. You can quickly and 
simply produce any combination of 
wavy, bubbly, organic, big, small, wide, 
narrow, rough or smooth textures in 
the colours of your choice. The 
developers reckon it's addictive stuff, 
so be warned. If you need inspiration, 
there's a gallery of existing Reptile 
designs to peruse. 


Palette Man 

Ww www.paletteman.com 

One of the hazards of designing a 
Website is selecting colours — if you 
don't choose the right combination, 
different browsers can make your on- 
line pride and joy look less than 
attractive. Palette Man will help you 
mix and match your colours, ensuring 
that they're Web safe and will look 
good on any browser. There's also a 
preset series of Webfriendly colour 
schemes, such as Industrial, Romantic 


and so on. Palette Man converts 
between hexadecimal and RGB values 
as well. 


Text effects 


CoolText 

W www.cooltext.com 

If you want an impressive logo in a 
hurry, with minimal effort, CoolText is 
essential. You just select font, size and 
style, type in what you want to say and 
away it goes, rendering your logo while 
u wait. Sometimes there's a queue, so 
you might have to hang around, but it's 
worth it — there's all sorts of great 
effects like fire, alien glow, chrome, 
neon etc. Fun and useful. 


Chank Fonts 

Ww www.chank.com 

Looking for something a bit different to 
set your site apart? Chank serves up 
the most innovative array of fonts on 
the Web. Some you have to pay for, but 
there's loads of free typefaces you can 
download, labouring under such 
outlandish names as Chubble, Stanky, 
Panzer and Sonic Reverb. Oh, and be 
sure to check out Alphabetician's 
Soopersecret Fontmaking tutorial while 
you're there. 


Promote your site 


V3 The Internet Identity 
Company 

W http://come.to 

Everyone wants to make their site easy 
to find, but not all of us have the 
money to afford a ‘proper’ domain 
name. That's where V3 comes in — for 
absolutely no money at all, you can 


obtain a redirect URL of your own 
choosing. Instead of the unwieldy 
address forced on you by your ISP, you 
can select an easy to remember 
address, such as come.to/mysite or 
surf.to/mysite. Visitors do see a pop- 
up advert for a few seconds — but 
better that than an address they can 
easily forget. 


Search Engine Watch 


W www.searchenginewatch.com 
There's no point spending hours 
conceiving, designing and uploading a 
Website if no-one can find it. That's 
why you need to register it with search 
engines, which can be a minefield if 
you don't know what you're doing. This 
site will tell you everything you need to 
know about submitting your site, with 
listings of all the top engines, reviews, 
ratings and resources. Essential. 


Guestworld 


W www.guestworld.com 

If you want feedback on your Website's 
design, one easy way to go about it is 
to set up a guestbook, where visitors 
can leave comments, ask questions or 
simply say hello. Guestworld lets you 
set one up for free and capture and 
store information about visitors to your 
site. It contains several other features 
such as an automatic e-mail function 
and more, to make your home page 
even homelier. 


Site Inspector 


W www.siteinspector.com 

So you've spent hours creating your 
Website, but unless you're fluent in 
advanced HTML, how do you make 
sure its code isn't flaky? Simply enter 
your site's URL at Site Inspector and 
within seconds you'll have a complete 


Now read on... Discover more about the Web with one of our sister magazines 


internet Works 


Internet Advisor 


-netis the 
UK's best- 
selling 
Internet 
magazine. 
Every month 
it's packed 


with news, 
reviews, 
features and 


interviews 


that are more 
reliable, relevant, practical and readable 
than any other magazine you can buy. 
-net tackles technical matters with clear 
guides that make even the most difficult 
issues seem surprisingly simple. 
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Internet Works 
is the only 
magazine 
designed to 
help the 
business 


Internet user 

maximise the 

benefits of their 

chosen media. 

Every month it 

covers all the 
business aspects of the Internet, from 
setting up an online business to finding 
an ISP. The advice is straightforward 
without being patronising, helping you 
get your business on the Net. 


Internet 
Advisor is the 
ultimate 
magazine for 
first time 
Internet users. 
Its message is 
anybody can 
use the 
Internet, with 
page after page 


of advice and 
information in plain English. Internet 
Advisor offers walkthroughs, practical 
tutorials and entertaining features 
designed to help beginners get to grips 
with the Net. 


CRAZY SITUATIONS 


CoolText enables you to quickly rustle 
up some impressive text effects for your 
Website with very little effort. 


report about every potential problem in 
your Web page's code. It checks link 
validity, spelling, browser compatibility, 
HTML validity — to ensure you're 
producing clean, fast-loading code, and 
it looks at your meta tags to ensure 
they're optimised for search engines. 


The Counter 

Ww www.thecounter.com 

Having a Web counter on your site 
displaying to all and sundry exactly 
how many people have paid you a visit 
is a little passe these days, but it's 
still useful to know who's been calling, 
where they're from and how they found 
you. This site features ad-free counters 
and trackers gratis, and you can make 
them invisible if you don't want to 
mess up your design, or if you don't 
want everyone to know that only 17 
people have visited your site. 


About the Web 


World Wide Web Consortium 
W http://w3c.org 

The Consortium is concerned with 
ratifying the standards used by the 
Web, thereby shaping the course of 
Web design. Its main concern is 
making the Web accessible to 
everyone, no matter what platform 
they're using, and to that end it sets 
the standards that Web designers 
should follow if they want their Website 
seen by as many eyes as possible, so 
it's only right to take a look. 


Head Space 

W www.headspace.com 

Head Space is a unique corner of the 
Web inhabited by ultracreative 
designers, giving them the opportunity 
to push the boundaries of technology 
which a paid job aimed at a mass 
audience could never give them. It 
features masses of contributions — 
literary as well as graphic — from all 
over the shop, including some 
breathtaking Web design and stunning 
Shockwave creations. If you want to be 


Mourtian Dew Extreme 


Take a trip back in time to the good old 
days and scrutinise the exhibits at the 
on-line Museum of Web Art. 


inspired by innovative, ground-breaking 
design, head for Head Space. 


Museum of Web Art 

W www.mowa.org 

There's definitely an art to great Web 
design, and where is great art usually 
found? In a gallery or museum, and 
that's why the Museum of Web Art has 
been founded, to preserve and 
promote great on-line design. It's 
organised like a real museum too, with 
different 'wings' each housing great 
Web animations, splash screens, 
buttons and more, with exhibit guides 
and a gift shop giving the whole affair a 
real gallery feel. Visit and be inspired. 


Creative Sight | 
W www. creativesight.c com 
Creative Sight aims to showcase the 
endless possibilities as seen by some 
of the world's finest designers — and 
that includes on-line creations in a big 
way. Recent features have included a 
colourful profile of Californian Web 
designers Juxt Interactive, known for 
their superb use of Flash. With copious 
notes and inside information, this is 
one extremely inspirational resource 
for Web designers. 


Web Standards Project 

Ww www.webstandards.org 

The Web Standards Project — WaSP for 
short — aims to pressurise developers 
into adopting a set of browser 
standards. Why does that matter? 
Well, if you're designing a Website, 
then you'll want your creation to look 
the way you intended on everyone's 
computer — and with both Microsoft 
and Netscape forever introducing new 
bits of technology incompatible with 
their rivals, that can be tough. So 
pledge your support for the WaSP. 


High Five 

w www.highfive.com 

Evolving from a weekly review site into 
an on-line design magazine, High Five 
aims to celebrate excellence in Web 
design. In addition to interviews, 


ehemia Q 
Intro for Web Site created to 
publicize the Neahmish Project. » 
radical new seminary program. 


Creative Sight celebrates some of the 
planet’s finest Website designers and 
showcases some inspirational creations. 


articles, news, and profiles of Web 
movers and shakers, High Five doles 
out awards to the best designed sites, 
selected for their conception, 
execution, and content, with an 
emphasis on clear information design 
and visual aesthetics. It's regularly 
updated with the freshest Websites -— if 
you're proud of yours, why not let the 
High Five crew know? 


Web Pages That Suck 

WwW www. webpagesthatsuck.com 

It's very funny — but the idea behind 
this long-established site is to promote 
good Web design by naming and 
shaming bad design. You can see 
some of the world's worst Websites, 
and learn from their design goofs. 
Founder Vincent Flanders emphasises 
the importance of functionality — 
pointing out that there's no point 
creating a beautiful site if people can't 
find their way around. He reserves 
most of his scorn for the trend for 
anonymous roll-over icons, a technique 
he brands Mystery Meat Navigation. 


Yale Style Manual 

w http://info.med.yale.edu/caim 
/manual/contents.html 

Being a Computer Arts reader, you're 
probably pretty hot on the principles of 
design. So this site will no doubt be of 
interest, delving as it does into the 
axioms of successful Web design, 
encouraging you to think about how 
your site will work before you strike a 
key in anger. There's page upon page 
of clear, concise advice on site 
structure, graphics and so on. You can 
also buy the book the site's based on. 


Web software 


Download 

Ww www.download.com 
Download.com is a huge humming 
nerve centre featuring hundreds of 
shareware programs, including just 
about everything you could possibly 
need to get your Website up and 
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Head Space pushes the boundaries of 
Web design as far as they will go, and 
just a little bit further for good measure. 


running. The site tells you how many 
times each piece of software has been 
downloaded, while links to mirror sites 
make downloading a breeze. And 
there's a search feature so you can get 
your hands on exactly what you want. 


Quick Hover 

W www.daryl.rowland.freeuk.com 
Here's a short and sweet free utility 
that'll add a little touch of class to 
links on your site. Quick Hover adds 
Dynamic HTML code to your site in a 
matter of seconds to create hover links 
— links that will change colour or style 
when you move your mouse over them. 
You can choose from 138 different 
colours and three hover styles — 
change colour, change colour with no 
underlining, and underline. 


HTML Shrinker 

W http://pico.i-us.com/tools/htmishr.htm 
HTML Shrinker is a nifty freeware utility 
for reducing the size of your Web 
pages, making your site load faster as 
a result. It wheedles out all the 
unnecessary end of lines, quotes 
within tags, spaces, shift spaces, tabs 
and so on, and should make your site 
load 10 per cent faster, and anything 
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Chank Fonts is home to Stanky, Chubble 
and Sonic Reverb and many other oddly 
named typefaces. 


up to 50 per cent faster if you're lucky. 
It's especially effective if your Website 
features lots of tables or was created 
with a WYSIWYG editor. 


File Dudes lee 

W www.filedudes.com 

Hey dude! This site isn't quite as crazy 
as the file dudes might like you to 
make out, but it's definitely not one to 
ignore either. It's packed with a 
shedload of software for you to 
download, including utilities, FTP stuff, 
Internet tools, multimedia, browsers, 
HTML editors and essential effects. 
And the very best downloads get the 
sought after seal of approval from 
those hot rockin' dudes! 


Browser Sizer 


W www.applythis.com/browsersizer 
There's no point taking the time and 
the trouble to create a sumptuous 
Website if it's going to look rubbish in 
someone else's browser. That's why 
you need Browser Sizer, a rather handy 
free app that'll help you check to see 
how your site looks in different screen 
resolutions as well as in Internet 
Explorer, Netscape Navigator and 
WebTV. Pretty much essential. EES 
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High Five! This on-line review of the best in Web design features regularly-updated 
news, reviews and profiles, and dishes out awards for the most creative sites. 
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"“Cangratulations on this new product 
which is simply brilliant", 


"The Distance Learning CD is excellent’, 
"Thorough & Stimulating" 


John Harris, Psygnosis 


Photoshop 5 

Photoshop 5 Techniques 
Director 7 + Lingo 
QuarkXPress 4 
QuarkXPress 4 Techniques 


TRAINING CD-ROMs 


www.vtco.com 


illustrator 8 
Poser 3 
Desktop Design 
Painter 5 


>» expert trainers 
After Effects 3.1 
Freehand 8 
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programmers 


Web Designer 
£36,000 
Top advertising agency looking for a highly 


creative web designer with at least two years 
commercial experience. The ability to come up 


WEsT LONDON 


with cutting edge concepts and communicate 
effectively. Flash, Director, Dreamweaver and 
Photoshop essential. 


Web Developer 
£30,000 


Developer with at least two years commercial 
experience to work with designers to develop 
web sites for growing client base. The role 
will suit someone with excellent technical skills 
and creative flair who understands what will 
work in web site creation. Excellent Java, Flash, 
Director and Photoshop etc. Very good 
communication skills. 


CENTRAL LONDON 
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SPECIALISTS 
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ClarisWorks 5 

MS Office 98 
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The definitive guide to art, design and technology 


Domain name Webspace with 
registration hosting service package plus... 


order online 


AA Aes pace.com 


Microsoft Frontpage 
Extensions 


Web Email Account 


POP3 Email Account - 
Unlimited Alias 


Mail Forwarding 
Account Setup 


Bandwidth - 
155Mbs Connection 


apply now and take 
advantage of this BIG offer 


computer 


Dual (PC & Mac) 


Fireworks 


PC only 


NetObjects Fusion 2.02 


Dual (PC & Mac) 
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Director 7 
Dreamweaver 3 
Fireworks 3 
Flash 4 

GoLive 4 
Photoshop 5.5 


PC only 


B3D Max 
NetObjects Fusion 4 
Signposter 3 


94 | computer arts | web design special 


vo. 8 


cas07 


Dual (PC & Mac) 


Acrobat Reader 
MetaStream 2.1 
QuickTime 

Shockwave Flash Player 7 


PC only 


WinZip 7 
Direct X 


Netscape Online free ISP 


Mac only 


Graphic Converter 3.6.1 
Stuffit Expander 4.5 
Aladdin Expander 5.1.2 
DropStuff 4.0 
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A packed CD with everything you need to create a brilliant Website 


CD Index 


Dual (PC & Mac) 


In the Dual folder on the CD 
you'll find folders containing 
files which support some of 
the tutorials in the magazine. 
These include the Web game 
(page 52), GoLive 4 (page 
62), Flash 4 (page 42), 
Dreamweaver 3 (page 74) 
and Fireworks (page 32). 


Software Demos 
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Director 7 


Full Product: £1110 

Computers Unlimited 

t0208 200 8282 

WwW www.macromedia.com 

Director is probably the world's best 
known multimedia design tool and just 
about any CD-ROM that's worth its salt 
these days was probably designed 
using the program. This latest release 
carries the subtitle Shockwave Internet 
Studio and is intended for use 
designing both interactive CDs and 
Web content. As Director can be used 
to create Shockwave Flash files, it's an 
ideal tool for designing Web games and 
other interactive elements for sites. 
You can learn how to do this through 
our Web game walkthrough starting on 
page 52. This is a 30-day trial. 


Dreamweaver 3 


Full Product: £199 

Computers Unlimited 

t 0208 200 8282 

Ww www.macromedia.com 

In the land of Web design software 
Macromedia has the strongest claim to 
the throne. The jewel in the company's 
richly adorned crown is probably the 
site authoring tool Dreamweaver. The 


key to Dreamweaver's success is that 
its interface works in a way designers 
like to work. You can see what you're 
working on before your eyes. This new 
release brings new powers both up 
front and in the back end which deals 
with databases and servers. Here 
we've got a 30-day demo of 
Dreamweaver 3 and readers can find 
out about the program and its new 
features by following our walkthrough 
which begins on page 74. 


Fireworks 3 


Full Product: £139 (£99 upgrade) 


Computers Unlimited 

t0208 200 8282 

W www.macromedia.com 

We've included this demo of the new 
version of Fireworks to accompany the 
complete copy of Fireworks 1, which is 
one of the headline programs on our 
CD this issue. Fireworks is a graphics 
application designed to work hand in 
hand with Dreamweaver. With its own 
set of vector and bitmap graphics 
tools, the program's ideal for creating 
buttons, logos and JavaScript 
rollovers. This version also supports 
image slicing to make the images you 
create download that little bit more 
smoothly. There are plenty more new 
features to explore so go ahead and 
see how its improved since version 1. 


Full Web graphics application (dual) 


You can upgrade to Fireworks 3 ata 
special rate on page 97. 


Flash 4 


Full Product: £304 

Computers Unlimited 

t 0208 200 8282 

Ww www.macromedia.com 

Hello! It seems Macromedia's Flash 
has kicked off something of a major 
trend among Website designers. 
Everyone wants to learn how to use it 
in order to create fantastic animations 
and impressive splash screens for 
their Websites. The vector-based 
animations generated by the program 
download in no time on the Web and 
play via the Shockwave Flash plug-in, 
which is available here on this CD, and 
from the Macromedia Website. If 
you're new to Flash, use this 30-day 
demo version to follow our tutorial 
starting on page 42. 


GoLive 4 


Full Product: £210 

Adobe Systems 

t0208 606 4000 

Ww www.adobe.com 

Adobe's GoLive is the company's 
professional Web design package. 
Pages are put together in the Layout 
Mode and you can drag and drop 


elements on to them from the Palette 
Window. In this age of e-commerce, 
dynamic linking with Active Server 
Pages is important and GoLive 4 really 
does the business here. It has a library 
of popular JavaScript actions available, 
simple DHTML functions, cascading 
style sheets and more. You can find 
out more by following our walkthrough 
which starts on page 62. This is a 30- 
day trial. 


Photoshop 5.5 


Full Product: £529 

Adobe Systems 

t 0208 606 4000 

Ww www.adobe.com 

You might be wondering just why we've 
put the demo version of Photoshop on 
the coverdisc. The reason is that the 
latest version of the program includes 
ImageReady 2.0, Adobe's Web 
graphics design application. The 
program works just like Photoshop 
with its powerful layer and actions 
features. However, it goes two steps 
further by incorporating graphics 
compression tools you can fine tune. 
You can even preview how images will 
look with varying levels of 
compression. Rollovers and image 
slicing are also routinely handled. This 
is a Save, export and print disabled 
demo version. => 


Layers | Frames | 
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PC only 
B3D Max 


Full Product: $495 

Brilliant Digital Entertainment 

e support@bde3d.com 

w www.bde3d.com/dev 
Theoretically 3D graphics are ideal for 
the Web — after all, polygon models are 
all vector based. It's when high res 
textures come into play that things get 
tricky. This plug-in for 3D Studio MAX 
enables you to export 3D animations 
for use on the Web either as streaming 
files or straight downloads. This 
doesn't install from the Computer Arts 


interface. Instead you'll find the 
executable in the PC Soft/Featured 
folder on the CD. You can test out the 
technology with this 30-day demo and 
the walkthrough on page 50. 


NetObjects Fusion 4 


Full Product: £137 

NetObjects 

to800 028 9851 

w www.netobjects.com 

As we go to press NetObjects is 
releasing Fusion 5, however this is the 
most up-to-date demo of the program 
that is available. Fusion is an 
application known for its flexibility in 


NetObjects Fusion 2.0 


With everyone raving about Macromedia's Web design software, it's easy to 
overlook the fact that there are other options out there. One program preferred by a 
good number of site designers is NetObjects Fusion. Version 4 of the software 
received a highly impressive score of 4.5 stars in issue 30 of Computer Arts (April 
1999), and Fusion § is going on sale as we go to print (see page 22 for more) 

It seems Fusion is a program with pedigree and we're therefore very pleased to 
be able to bring you the complete version of NetObjects Fusion 2.0. The program is 
simple to master, and comes with an array of templates and preset styles for you to 
use. If you need to work quickly, you'll benefit from Fusion's streamlined creation 
proces 5 

At the same time, Fusion 2 is very flexible. You can lay out sites using the drag 
ittons and so 
on. For every page you create, Fusion will log all the graphics and other files used 


and-drop DTP style interface, importing your own graphics, loc 


making it very easy to keep track of all your materials before you upload your site to 
a server. The uploading process itself is simplified thanks to Fusion's one-click 
button for publishing to the Web. 

Finally there's the small matter of e-commerce. If you need to design a site that 
links to a database of products — say for an on-line catalogue — Fusion is just the 
ticket. Pulling information from an Access database, for instance, is extremely 
simple to set up 

You can learn how to use NetObjects Fusion by following our tutorial which 
begins on page 36 of the magazine 


PC Min: Pentium > Win 95/98/NT > 16MB RAM > 80MB HD 
800x600 256 colour display» Net connection 


NetObjects Fusion 2.0 is a quick and easy way to design your own Website on a 
PC and get it on-line. You'll find it on our coverdisc. 
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the area of e-commerce and the 
publication of databases to the Net, 
however with version 4 and also 
version 5, NetObjects is aiming to beef 
up the program's design capabilities. 


Signposter 3 


Full Product: $59.95 

Signposter 

f 0870 088 2673 

Ww www.signposter.com 
SignPoster does three simple things, 
but it does them rather well. Firstly it 
creates the 'meta’ information for your 
pages which is used by Internet search 
engines. Secondly it uploads the meta 
information to your site for you. Thirdly, 
it submits this data to the key search 
engines. Run Signposter and you can 
sit back, put your feet up and wait for 
the traffic. 


Resources 
Dual (PC & Mac) 


With each Computer Arts disc we 
include a collection of essential 
applications as resources. They're the 
sort of thing you shouldn't be without. 
Here on our Web Special CD you'll find 
Acrobat Reader for opening PDF 
documents, and MetaStream 2.1 to 
give your browser support for 
MetaCreations' 3D streaming 
technology. QuickTime 3.0 is included 
(along with QuickTime 2.1.2 for PC 
users) and is an essential part of our 
interface. Finally there's Shockwave 
Flash Player 7, just in case your 
browser isn't 'Shocked'. 


PC only 


PC users will find the file compression 


and decompression tool WinZip 7 a 
real boon. It's shareware so we 
recommend you register if you make it 
a full-time fixture on your PC. DirectX 6 
is on the CD in case you need it. And, if 
you're looking for a new ISP you can try 
the Netscape Online free ISP software 
included on our CD in conjunction with 
Netscape. 


Mac only 


Our Mac resources include the 
shareware graphics application 
Graphic Converter 3.6.1. 

Stuffit Expander 4.5, Aladdin Expander 
5.1.2 and DropStuff 4.0 are all | 

Mac file compression and 
decompression utilities. FES 


Promotional feature 


a 
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Netscape Online 


THE FREE INTERNET 
SERVICE IN ASSOCIATION 
WITH FUTURE PUBLISHING 


ign up for the new FREE 
6% Netscape Online Service 

sponsored by Future 
Publishing and featuring content 
from Future Publishing's 


content has 


Get FREE access to the new 
Netscape Online service — with 
this month's coverdisc. 
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FIREWORKS = 
The Solution for Professional 


é rate SB Son -ewo ¢ 6 ri re ay o r ik S 


e. 


ow that you've tried the fantastic full 
version of Fireworks 1 presented to you 
free on our CD, isn't it time you 
uw considered obtaining all the power and 
features of the latest version of the program? 
Fireworks 3 contains an array of new and 
improved features to help you design Web graphics, 
automate the image creation process, and integrate 
the wonderful pictures you create into your interactive 


Fl 
fd ae te Si lution. 
mplete So! 
The ottessional Web oe 
Design and Production uM 


eb designers rejoice. Macromedia has 

decided to unleash the powers of both 

Dreamweaver 3 and Fireworks 3 in a 
single box, creating what's probably the 
most desirable Web design package currently 
available. 

As we've already detailed, Fireworks 3 is a tasty 
Web graphics package in itself. Add to that the 
flexibility and ease of use brought by Dreamweaver 3 
and the combination is unstoppable. With 


Ww 


to take advantage of these 


special upgrade prices call 


Firewor 


GRAB THE LATEST VERSION OF MACROMEDIA'S PROFESSIONAL WEB GRAPHICS APPLICATION 


Web pages. The program's previewing features make 
it far easier to test how your text and rollovers will 
look from within the program, saving invaluable time. 
The History panel will help save time too, enabling 
you to keep track of what you've done and undo 
anything you don't like. You can make entire 
JavaScript apps, and button creation is a dream. 

The program integrates well with Macromedia’s 
renowned Website editing package Dreamweaver 3, 


MACROMEDIA’S POWERFUL FLAGSHIP WEB PACKAGES COMBINED IN A SINGLE BOX 


Dreamweaver 3 you can edit your site's HTML directly 
through the Quick Tag Editor, and create style sheets 
for characters and fonts to ensure consistency across 
a site. New objects let you add dates, e-mail, 
navigation bars, jump menu objects, special 
characters and insert Flash 4, Shockwave 7, and 
Generator content. 

Like Fireworks 3, the new Dreamweaver includes 
a History panel for no-hassle recording and undoing 
your actions. For server end work the tag model has 


web special > 


< upgrade offer 


S 


3 


enabling you to insert objects created in Fireworks 
directly into your Websites. You'll also be able to copy 
to the clipboard wizard for step-by-step insertion of 
HTML into GoLive and FrontPage. Of course, Fireworks 
3 offers plenty more useful features besides, as 
you'll find out if you take advantage of this offer to 
upgrade... 


To find out more about Fireworks 3 seeW www.macromedia.com 


been extended to recognises ASP, JSP, CFML, PHP 
and more. JavaScript coders will find documents 
much more flexible to work with at the authoring 
stage, and you can now customise your menus and 
shortcuts more easily in XML. Dreamweaver 3 
Fireworks 3 Studio is some bundle, and this is your 
opportunity to make the upgrade. ES 


To find out more about Dreamweaver 3 Fireworks 3 Studio see 
W www.macromedia.com 


Offer available to UK residents only. Expires 31 March 2000 


0208 358 5855 


ie 
on sale monday 3rd april 


caso7 


SAT Ss 


an inspirational edition filled with tutorials, profiles & expert advice 


» Improve your skills and knowledge with the experts 
Editing in Style 
» Creating cuts with atmosphere 

» Titling, credits and text effects masterclass f 


R tod ‘ a if 
Aves | Pop Promo! af rn 
Z &£ 9 Py 


wicashe deliver your copy of , z = 
SOE soir ceor ocy ee? |» The making of a DV music video 


dv cams > adobe premiere > titling & captions > commotion Snvun..., 


editing > software > firewire 


capture cards 


Contents subject to change 
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Netscape Online 


Enjoy full access to the Internet with the people who made it accessible in the first place. 
Enjoy it for nothing but the price of a local phone call. Enjoy Netscape Online. 


100% NET. 100% FREE.’ 


In association with Future Publishing. 0800 923 0009 See cover CD or www.netscapeonline.co.uk/future 


Put a serious dent in your workload 


mm Dreamweaver 3 — 
_gFireworks 3 Studio. 


Introducing Dreamweaver 3 and Fireworks 3 Studio. 
The newest versions of Dreamweaver and Fireworks work 


together to give you the power to create Web sites faster. 
New features in Dreamweavers3: 


g@ Support for Microsoft Office: Quickly strip non-essential tags from 
HTML output from Microsoft Word, as well as easily import and 
display Excel and Access data. 


B The new History Palette: Enhance your productivity by automating 
Web production and recording your every move and saving steps 

as reusable commands. 

g@ Text Styles: Define and modify globally using HTML Styles that work 


across all browsers and can be shared across teams to ensure a 


consistent look-and-feel. 


New in Fireworks3: 


g Library Palette: Images can be saved as symbols and reused throughout a 
site. Symbols retain all their properties including links, behaviors and effects. 


gw Vector graphics: Export for use in other vector drawing programs such as 


Macromedia Flash, Macromedia FreeHand, and Adobe Illustrator. 


Buy Dreamweaver 3 Fireworks 3 Studio from your local reseller for only 
£299 vat, or if you would like to see Macromedia’s amazing product 
range in action first, register for one of our seminars by visiting 


www.macromedia.com/uk/events. 


To upgrade call Upgrades Unlimited on 0208 358 5855 
If you own copies of both Dreamweaver 2 AND 
Fireworks 2 OR Dreamweaver 2 Fireworks 2 Studio you 
can upgrade for only £149 

Upgrade from Dreamweaver 2 OR Fireworks 2 


for £2179* 


* subject to VAT at 17.5% and a delivery charge 


th product demos and trial mac romed ia 


For more information, including a free CD wi 
versions call O870 GOO 1041. www.macromedia.com/uk 


DIRECTOR DREAMWEAVER) (FIREWORKS FLASH FREEHAND GENERATOR SHOCKWAVE 


